/* ============================================================
   tokens.css — RootFed design tokens
   Color, type, space, motion, layout. Single source of truth.
   ============================================================ */

:root {
  /* Color
     Aligned to the Fabric Onishi / KANZOU palette (rendered-page extraction,
     2026-05-05). See internal color audit notes (not deployed).
     Surfaces, text, dividers adopt the Fabric Onishi neutrals exactly.
     A single retained green (--color-umber) preserves the GreenRoot plant
     identity for hover states and one heading. A single new accent
     (--color-accent #FF5035) is reserved for the wordmark dot only —
     never as a primary CTA background. */
  --color-bone: #F8F7F6;             /* Fabric Onishi page bg (was #F7F7F2) */
  --color-surface: #FFFFFF;          /* Fabric Onishi card/elevated surface */
  --color-ink: #1E1E1E;              /* Fabric Onishi heading / dark CTA bg (was #111111) */
  --color-graphite: #333333;         /* Fabric Onishi body text (was #3D403B) */
  --color-graphite-soft: #666666;    /* Accessible muted variant: Fabric Onishi #AAAAAA fails AA at 2.5:1; #666666 = 5.66:1 on bone (was #5C5F5A) */
  --color-oat: #EEEDEC;              /* Fabric Onishi tertiary section tone (was #F1F3EC, very close) */
  --color-oat-deep: #DAD9D6;         /* Slightly neutralised from #D9DDD2 */
  --color-umber: #1F3A2D;            /* RETAINED green — single brand thread (button hover, footer hover, IETS card heading) */
  --color-accent: #FF5035;           /* Fabric Onishi vivid CTA orange-red — used ONLY as the wordmark dot. Note: WCAG contrast 3.45:1 with white text — never apply as button background. */
  --color-hairline: rgba(0, 0, 0, 0.10);          /* Neutral hairline (was umber-tinted rgba(31,58,45,0.12)) */
  --color-hairline-strong: rgba(0, 0, 0, 0.18);   /* Neutral stronger hairline (was umber-tinted rgba(31,58,45,0.20)) */
  --color-hairline-bone: rgba(247, 247, 242, 0.18);  /* Unchanged — used on dark-bg dividers */

  /* Typography stacks
     Aligned to the Fabric Onishi feed-additive page: Montserrat for display
     headings, Lato for body. Both ship via Google Fonts under SIL OFL 1.1.
     JetBrains Mono retained for technical labels and microcopy — preserves
     the GreenRoot "documentation pack" voice. */
  --font-display: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Lato", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Heading + body weight scale — Montserrat 500 reads cleaner than 600 at
     the rescaled display sizes; 600 was billboarding. h1/h2 stay at 500.
     Lato body sits at 400 with 300 reserved for editorial ledes (matches
     the Fabric Onishi loose body weight). */
  --weight-display: 500;
  --weight-h1: 500;
  --weight-h2: 500;
  --weight-body: 400;
  --weight-body-lede: 300;

  /* Label tracking — wider on the small uppercase labels to match the Fabric
     Onishi "loose-tracked small caps" rhythm; mono labels stay at 0.12em. */
  --track-eyebrow: 0.18em;     /* 12px uppercase eyebrow (.eyebrow) */
  --track-mono-label: 0.12em;  /* 10–11px mono labels (.text-mono and similar) */

  /* Type scale (fluid) — calibrated for Montserrat. The previous scale was
     inherited from the Fraunces era; Montserrat is wider and heavier per
     character, so each tier was reduced ~20% to keep the visual balance. */
  --fs-display-xl: clamp(40px, 5vw, 80px);
  --fs-display-l: clamp(32px, 4vw, 56px);
  --fs-h1: clamp(26px, 3vw, 42px);
  --fs-h2: clamp(20px, 2vw, 28px);
  --fs-h3: 18px;
  --fs-body-l: 18px;
  --fs-body: 16px;
  --fs-small: 13px;
  --fs-eyebrow: 12px;

  /* Space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 160px;
  --space-12: 200px;

  /* Layout */
  --container-max: 1320px;
  --container-narrow: 920px;
  --gutter: 24px;

  /* Motion */
  --motion-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --motion-ease-soft: cubic-bezier(0.32, 0.08, 0.24, 1);
  --motion-fast: 150ms;
  --motion-base: 300ms;
  --motion-slow: 600ms;
  --motion-reveal: 800ms;

  /* Border */
  --border-hairline: 1px solid var(--color-hairline);
  --border-hairline-strong: 1px solid var(--color-hairline-strong);
}

@media (min-width: 768px)  { :root { --gutter: 32px; } }
@media (min-width: 1280px) { :root { --gutter: 48px; } }