/* ==========================================================================
   Inventive Tech Solutions — Design tokens
   Locked in Phase 1/2. Change values here only, never in main.css.
   ========================================================================== */

:root {
  /* --- Colour ------------------------------------------------------------ */
  --bg:            #FAF8F4;
  --bg-alt:        #F2EFE9;
  --surface:       #FFFFFF;
  --ink:           #14141A;
  --ink-muted:     #5C5C66;
  --border:        #E2DED6;
  --border-strong: #C9C4B8;
  --brand:         #4B61FF;
  --brand-hover:   #3A4EE0;
  /* Text-safe blue. #4B61FF is 4.45:1 on --bg, just under AA for normal text,
     so small blue text uses this instead. Buttons keep --brand (white on it is 4.72:1). */
  --brand-text:    #3A4EE0;
  --brand-tint:    #EDEFFF;
  --dark:          #16161C;

  --success: #1B7A4B;
  --warning: #B45309;
  --error:   #B42318;

  /* --- Type families ----------------------------------------------------- */
  --font-display: "Bricolage Grotesque", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body:    "IBM Plex Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* --- Type scale (fluid) ------------------------------------------------
     Refinement pass: sizes reduced ~10-13% and line-heights tightened.
     Body is 16px; small text 14px; mono 12px. */
  --fs-display: clamp(2.25rem, 1.5rem + 3.2vw, 4rem);
  --fs-h1:      clamp(1.95rem, 1.45rem + 2.1vw, 3.0625rem);
  --fs-h2:      clamp(1.5rem, 1.25rem + 1.15vw, 2.0625rem);
  --fs-h3:      clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);
  --fs-h4:      1.0625rem;
  --fs-lead:    clamp(1rem, 0.97rem + 0.18vw, 1.0625rem);
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-mono:    0.75rem;
  --fs-label:   0.6875rem;

  --lh-tight: 0.99;
  --lh-head:  1.1;
  --lh-body:  1.6;

  --ls-display: -0.032em;
  --ls-head:    -0.024em;
  --ls-label:   0.08em;

  /* --- Spacing (4px base) ------------------------------------------------ */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --s-11: 10rem;

  /* --- Layout ------------------------------------------------------------ */
  --container: 1280px;
  --gutter: 1.5rem;
  --measure: 64ch;
  --header-h: 64px;

  /* --- Section rhythm (varied deliberately, not one value) ---------------- */
  --section-y:       clamp(2.75rem, 1.8rem + 4.1vw, 4.5rem);
  --section-y-loose: clamp(3.5rem, 2.1rem + 5.4vw, 5.75rem);

  /* --- Radius & lines ----------------------------------------------------- */
  --r-sm: 3px;
  --r:    5px;
  --r-lg: 6px;
  --hairline: 1px solid var(--border);

  /* --- Motion ------------------------------------------------------------- */
  --t-fast: 160ms cubic-bezier(.4,0,.2,1);
  --t:      240ms cubic-bezier(.4,0,.2,1);
  --t-slow: 320ms cubic-bezier(.4,0,.2,1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}