/* ============================================================================
   InfraTech LLC — Design Tokens
   "Graphite & Filament" — a precision-engineering system.
   Every color, type step, space and motion value the site uses lives here.
   ========================================================================== */

:root {
  /* ---- Color · surfaces (cool near-black, drafting graphite) ------------- */
  --void:        #08090C;   /* page base                                     */
  --graphite:    #0C0F14;   /* raised sections                               */
  --steel:       #11161D;   /* cards / panels                                */
  --steel-2:     #151B23;   /* card hover / insets                           */
  --edge:        #222A34;   /* visible 1px strokes                           */

  /* ---- Color · lines (engineering-drawing hairlines) -------------------- */
  --line:        rgba(210, 224, 238, .08);
  --line-strong: rgba(210, 224, 238, .14);

  /* ---- Color · ink ------------------------------------------------------ */
  --mist:        #7E8A98;   /* mono labels, captions, muted                  */
  --ink:         #B8C2CE;   /* body copy                                     */
  --ink-bright:  #D7DEE7;   /* emphasised body                               */
  --pure:        #F3F7FB;   /* headings                                      */

  /* ---- Color · accent (the CAD "selection / highlight") ----------------- */
  --filament:        #3B82F6;            /* primary — electric signal blue   */
  --filament-bright: #66A1FF;
  --filament-deep:   #1B4FD9;
  --filament-soft:   rgba(59, 130, 246, .12);
  --filament-glow:   rgba(59, 130, 246, .30);
  --filament-line:   rgba(59, 130, 246, .42);

  --blueprint:       #7FB2FF;            /* secondary — lighter sky / data   */
  --blueprint-soft:  rgba(127, 178, 255, .12);

  /* selection */
  --select-bg: rgba(59, 130, 246, .24);

  /* ---- Type · families -------------------------------------------------- */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---- Type · fluid scale (clamp: min .. preferred .. max) ---------------
     Anchored on the home hero H1 (--fs-h1). Strict hierarchy at every width:
     h1 > h2 > h3 > h4 > lead > body. Steeper vw on bigger steps keeps order. */
  --fs-mono:    clamp(.66rem, .62rem + .12vw, .74rem);   /* labels           */
  --fs-small:   clamp(.82rem, .79rem + .12vw, .88rem);
  --fs-body:    clamp(.95rem, .92rem + .15vw, 1.02rem);
  --fs-lead:    clamp(1.0rem, .95rem + .3vw, 1.2rem);
  --fs-h4:      clamp(1.05rem, .98rem + .35vw, 1.28rem);
  --fs-h3:      clamp(1.25rem, 1.05rem + .85vw, 1.75rem);
  --fs-h2:      clamp(1.5rem, 1.05rem + 1.4vw, 2.5rem);
  --fs-h1:      clamp(1.75rem, 0.4rem + 3.15vw, 3.7rem);  /* anchor = hero    */
  --fs-mega:    clamp(1.75rem, 0.4rem + 3.15vw, 3.7rem);  /* = h1 (legacy)    */
  --fs-index:   clamp(.7rem, .66rem + .14vw, .78rem);    /* section indices  */

  /* ---- Type · tracking -------------------------------------------------- */
  --track-mono:  .16em;
  --track-tight: -.02em;
  --track-mega:  -.035em;

  /* ---- Spacing scale ---------------------------------------------------- */
  --sp-1:  .25rem;
  --sp-2:  .5rem;
  --sp-3:  .75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;
  --sp-section: clamp(4.5rem, 3rem + 7vw, 9rem);   /* vertical section rhythm */

  /* ---- Layout ----------------------------------------------------------- */
  --maxw:      1440px;     /* content max width                             */
  --maxw-text: 62ch;       /* readable measure                              */
  --gutter:    clamp(1.25rem, .6rem + 3vw, 4rem);
  --rail:      clamp(0px, -2rem + 6vw, 4.5rem);  /* outer annotation rail    */

  /* ---- Radius (engineering = sharp; used very sparingly) ----------------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-pill: 100px;

  /* ---- Elevation -------------------------------------------------------- */
  --shadow-card: 0 1px 0 rgba(255,255,255,.02), 0 24px 60px -32px rgba(0,0,0,.8);
  --shadow-pop:  0 40px 90px -40px rgba(0,0,0,.9);

  /* ---- Motion ----------------------------------------------------------- */
  --ease-out:   cubic-bezier(.2, .7, .2, 1);
  --ease-inout: cubic-bezier(.65, .05, .25, 1);
  --ease-spring:cubic-bezier(.34, 1.4, .5, 1);
  --dur-fast:   .22s;
  --dur:        .42s;
  --dur-slow:   .7s;

  /* ---- z-index ---------------------------------------------------------- */
  --z-grid:    0;
  --z-base:    1;
  --z-header:  100;
  --z-menu:    200;
  --z-cursor:  9999;

  /* header height (read by JS scroll offset) */
  --header-h: 76px;
}

/* Light-on-dark only — no light theme for this brand. */
::selection { background: var(--select-bg); color: var(--pure); }