/* ==========================================================================
   proto/shared/tokens.css — Foundation Agent
   Design tokens shared by ALL directions.
   NO colors, NO font families here — each direction owns those locally
   in direction-x/app/styles.css.
   Import order per direction: ../shared/reset.css → ../shared/tokens.css →
   app/styles.css.
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------
     Spacing scale — 4px base, geometric-ish. Use for padding, gaps, margins.
     -------------------------------------------------------------------- */
  --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 */

  /* Vertical rhythm between page sections (fluid). Directions may scale it
     (e.g. airy = --section-pad-y * 1.5) but should derive from this token. */
  --section-pad-y: clamp(3rem, 2rem + 5vw, 6rem);

  /* --------------------------------------------------------------------
     Type scale — fluid via clamp(), ~1.25 ratio at desktop.
     Sized so body text is 16px at 375px viewport, ~18px at 1440px.
     -------------------------------------------------------------------- */
  --text-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);  /* 12→13px */
  --text-sm:   clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem); /* 14→15px */
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);       /* 16→18px */
  --text-lg:   clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);  /* 18→22px */
  --text-xl:   clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);    /* 22→28px */
  --text-2xl:  clamp(1.75rem, 1.5rem + 1.1vw, 2.5rem);       /* 28→40px */
  --text-3xl:  clamp(2.25rem, 1.8rem + 2vw, 3.5rem);         /* 36→56px */
  --text-hero: clamp(2.5rem, 1.9rem + 3vw, 4.5rem);          /* 40→72px */

  --leading-tight: 1.15;   /* display / hero */
  --leading-snug: 1.35;    /* headings, card titles */
  --leading-normal: 1.6;   /* body copy */

  --tracking-tight: -0.02em; /* large display sizes */
  --tracking-wide: 0.08em;   /* small caps / eyebrow labels */

  /* --------------------------------------------------------------------
     Radii. Rule: no double-rounded corners — a child inside a rounded
     parent uses --radius-inner = max(parent radius − parent padding, 0)
     or just none.
     -------------------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* --------------------------------------------------------------------
     Container widths.
     -------------------------------------------------------------------- */
  --container-narrow: 42rem;   /* 672px — prose, contact section */
  --container-default: 70rem;  /* 1120px — main content column */
  --container-wide: 85rem;     /* 1360px — full-bleed-ish grids */
  --container-pad-x: clamp(1rem, 0.5rem + 3vw, 2.5rem); /* side gutters */

  /* --------------------------------------------------------------------
     Motion. Directions with motion axis "none/minimal" use only -fast for
     hovers/focus. Scroll-reveal directions use -base/-slow.
     -------------------------------------------------------------------- */
  --duration-fast: 150ms;   /* hover, focus, small state changes */
  --duration-base: 300ms;   /* reveals, accordions */
  --duration-slow: 600ms;   /* scroll-reveal entrances */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --reveal-distance: 24px;  /* translate offset for scroll-reveal entrances */

  /* --------------------------------------------------------------------
     Z-index scale — use ONLY these values.
     -------------------------------------------------------------------- */
  --z-base: 0;
  --z-raised: 10;    /* cards lifted on hover, sticky sub-elements */
  --z-nav: 100;      /* sticky/fixed header */
  --z-overlay: 200;  /* mobile menu panel, scrims */
  --z-top: 300;      /* skip link when focused */
}

/* --------------------------------------------------------------------
   Breakpoints — CSS custom properties CANNOT be used inside @media
   queries. These are the canonical values; copy the px literals into
   your media queries and keep them exact so QA can grep them.

     --bp-sm:  640px    (min-width: 640px)  — 2-col grids begin
     --bp-md:  768px    (min-width: 768px)  — tablet layout
     --bp-lg:  1024px   (min-width: 1024px) — full desktop grids
     --bp-xl:  1440px   (min-width: 1440px) — max-comfort layout

   QA VERIFICATION WIDTHS (screenshots + measurement): 375 / 768 / 1440.
   Design mobile-first; the page must be clean at exactly those three.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   Reduced motion: zero the motion tokens so every animation/transition
   built from them collapses. reset.css additionally force-shortens all
   animations globally; this covers token-driven JS timings too (app.js
   should read durations from getComputedStyle, or check
   matchMedia('(prefers-reduced-motion: reduce)') before animating).
   -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
    --reveal-distance: 0px;
  }
}