/* ==========================================================================
   Farner Intelligent Systems — shared design tokens
   Foundation Agent, Wave 2 (2026-08-30)

   Scope: spacing, fluid type scale, radii, breakpoints (documented values),
   motion durations/easings, z-index, layout metrics.

   HARD RULE — this file contains NO color values and NO font-family values.
   Each direction owns its palette and faces locally (process: Foundation
   Agent role; direction-proposals.md fixes what those are per direction).

   Import order in every direction:
     1. app/reset.css
     2. app/tokens.css
     3. app/styles.css  (local — colors, faces, direction identity)
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     SPACING — 4px-base modular scale.
     Serves airy (a, d) and dense (c, f) directions alike: airy pages
     reach for the high steps and --space-section; dense pages compose
     from the low steps and --space-section-dense. Do not invent
     off-scale gaps; compose with calc() on these tokens if needed.
     ------------------------------------------------------------------ */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.5rem;    /* 24px */
  --space-6:  2rem;      /* 32px */
  --space-7:  3rem;      /* 48px */
  --space-8:  4rem;      /* 64px */
  --space-9:  6rem;      /* 96px */
  --space-10: 8rem;      /* 128px */

  /* Fluid vertical rhythm between page sections (375 → 1440) */
  --space-section:       clamp(4rem, 2.6rem + 6vw, 8rem);      /* airy default   */
  --space-section-dense: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);  /* dense default  */
  /* Fluid horizontal page gutter */
  --gutter: clamp(1rem, 0.3rem + 3vw, 3rem);

  /* ------------------------------------------------------------------
     TYPE SCALE — fluid clamp() steps, 375px → 1440px viewports.
     Gate 1 mobile-parity rule: readable at 375 with NO tradeoffs.
     The clamp() minimum IS the 375 rendering — body copy never drops
     below 16px, micro text never below 12px (13px minimum for
     monospace UI text — see component-contract.md §5).
     Slopes are computed against the 375–1440 range.
     ------------------------------------------------------------------ */
  --text--2: clamp(0.75rem,   0.7285rem + 0.0940vw, 0.8125rem); /* 12 → 13   micro/legal    */
  --text--1: clamp(0.8125rem, 0.7910rem + 0.0940vw, 0.875rem);  /* 13 → 14   labels/kickers */
  --text-0:  clamp(1rem,      0.9785rem + 0.0940vw, 1.0625rem); /* 16 → 17   body           */
  --text-1:  clamp(1.125rem,  1.0810rem + 0.1878vw, 1.25rem);   /* 18 → 20   lead/large body*/
  --text-2:  clamp(1.25rem,   1.1620rem + 0.3756vw, 1.5rem);    /* 20 → 24   h4/subhead     */
  --text-3:  clamp(1.5rem,    1.3680rem + 0.5634vw, 1.875rem);  /* 24 → 30   h3             */
  --text-4:  clamp(1.75rem,   1.4860rem + 1.1268vw, 2.5rem);    /* 28 → 40   h2             */
  --text-5:  clamp(2.25rem,   1.8100rem + 1.8779vw, 3.5rem);    /* 36 → 56   h1/section hero*/
  --text-6:  clamp(2.75rem,   1.9950rem + 3.2160vw, 5rem);      /* 44 → 80   display        */
  --text-7:  clamp(3.25rem,   2.1070rem + 4.8826vw, 6.5rem);    /* 52 → 104  hero display   */

  /* Line heights (unitless) */
  --leading-tight:   1.1;   /* display */
  --leading-snug:    1.3;   /* headings */
  --leading-normal:  1.55;  /* body */
  --leading-relaxed: 1.7;   /* airy body / long-form */

  /* Letter spacing */
  --tracking-tight:  -0.02em;  /* large display */
  --tracking-normal:  0;
  --tracking-wide:    0.06em;  /* kickers, uppercase-styled labels */

  /* Reading measure */
  --measure:        65ch;
  --measure-narrow: 45ch;

  /* ------------------------------------------------------------------
     RADII
     ------------------------------------------------------------------ */
  --radius-0:    0;        /* square — crop-mark/schematic chrome */
  --radius-1:    2px;      /* hairline softening */
  --radius-2:    4px;      /* buttons, inputs */
  --radius-3:    8px;      /* cards, wells */
  --radius-4:    16px;     /* large surfaces */
  --radius-full: 999px;    /* pills */
  /* Gotcha: no double-rounded corners — a child inside a rounded parent
     uses calc(parent-radius - parent-padding), or radius 0. */

  /* ------------------------------------------------------------------
     BREAKPOINTS — DOCUMENTED VALUES.
     Custom properties cannot be used inside @media conditions; these
     tokens exist as the single written record of the canonical values.
     Builders type the literal px values in media queries and MUST use
     these exact numbers (binding-specs.md §7 lists the two sanctioned
     exceptions: 700px marquee full-width in direction a; ~1100px nav
     collapse latitude).
       375px  — mobile floor (QA viewport; Gate 1: full parity, no tradeoffs)
       768px  — tablet (QA viewport)
       1024px — rail swap: direction f replaces its left rail with
                top bar + bottom tab bar BELOW this width; also the
                general desktop-nav threshold
       1440px — desktop (QA viewport)
     ------------------------------------------------------------------ */
  --bp-mobile:  375px;   /* documentation only — not usable in @media */
  --bp-tablet:  768px;   /* documentation only */
  --bp-rail:    1024px;  /* documentation only */
  --bp-desktop: 1440px;  /* documentation only */

  /* ------------------------------------------------------------------
     MOTION — durations + easing.
     Every animated element also needs its semantic reduced-motion
     static state (component-contract.md §6); the reset.css global
     guard is a floor, not the implementation.
     ------------------------------------------------------------------ */
  --duration-fast:    150ms;  /* focus rings, small state flips */
  --duration-hover:   200ms;  /* hover micro-interactions (shortlist #9: 0.18–0.22s) */
  --duration-base:    250ms;  /* standard transitions */
  --duration-slow:    400ms;  /* header backdrop fade, panel state */
  --duration-reveal:  600ms;  /* scroll-reveal entrances */
  --duration-marquee: 45s;    /* direction a marquee loop (binding-specs.md §5) */

  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-linear:  linear;      /* marquee track */
  /* steps() timing (direction c pixel-march) is authored locally. */

  /* ------------------------------------------------------------------
     Z-INDEX SCALE — use tokens only; no invented z values.
     ------------------------------------------------------------------ */
  --z-base:     0;
  --z-raised:   10;   /* cards, hover lifts, marquee fade overlays */
  --z-tabbar:   90;   /* direction f fixed bottom tab bar (<1024px) */
  --z-header:   100;  /* sticky header / rail — above all page content */
  --z-overlay:  200;  /* open mobile nav / menu layer */
  --z-skiplink: 300;  /* skip link when focused */

  /* ------------------------------------------------------------------
     LAYOUT METRICS
     ------------------------------------------------------------------ */
  --header-height: 4rem;  /* DEFAULT. Each direction overrides on :root to its
                             real rendered header height (per viewport if it
                             changes). reset.css keys scroll-padding-top to
                             this token — keeping it truthful is what keeps
                             anchored sections from being clipped behind the
                             sticky header (clipped = defect). */
  --rail-width: 104px;    /* direction f left rail, ≥1024px (binding-specs.md §1) */
  --tap-target: 44px;     /* minimum hit area for the contact control and all
                             touch-primary controls at ≤768px */
}