/* ==========================================================================
   tokens.css — design tokens only. Custom properties on :root, no selectors.
   Nothing outside this file may hard-code a hex value. See plans/landing.MD §4-6.
   ========================================================================== */

:root {

  /* -- KIT official colors (§4.1) -- */
  --kit-green: #009682;
  --kit-blue: #4664AA;
  --kit-black-70: #404040;

  /* -- KIT secondary accents — sparing use only (§4.2) -- */
  --kit-brown: #A7822E;
  --kit-purple: #A3107C;
  --kit-cyan: #23A1E0;
  --kit-maigreen: #8CB63C;
  --kit-yellow: #FCE500;
  --kit-orange: #DF9B1B;
  --kit-red: #A22223;

  /* -- Derived KIT-green scale (§4.3) -- */
  --green-50: #F4FAF9;
  --green-100: #E6F4F2;
  --green-200: #CCEAE6;
  --green-300: #A3D9D2;
  --green-400: #61BEB2;
  --green-500: #009682;
  --green-600: #008170;
  --green-700: #00695B;
  --green-800: #005146;
  --green-900: #00362F;

  /* -- Neutral "ink" ramp (§4.4) -- */
  --ink-900: #10201D;
  --ink-800: #1C2E2B;
  --ink-700: #2B3A38;
  --ink-600: #404040;
  --ink-500: #5A6664;
  --ink-400: #7C8886;
  --ink-300: #A8B2B0;
  --ink-200: #D5DBDA;
  --ink-100: #E9EDEC;
  --ink-50: #F5F7F7;

  /* -- Semantic aliases (§4.5) — component sheets use only these -- */
  --surface: #FFFFFF;
  --surface-alt: var(--green-50);
  --surface-neutral: var(--ink-50);
  --surface-inverse: var(--ink-800);

  --text-primary: var(--ink-700);
  --text-body: var(--ink-600);
  --text-muted: var(--ink-500);
  --text-inverse: #FFFFFF;
  --text-inverse-muted: #C9D3D1;
  --text-accent: var(--green-700);

  --brand: var(--kit-green);
  --brand-strong: var(--green-600);
  --brand-deep: var(--green-700);

  --border-subtle: var(--ink-200);
  --border-brand: var(--green-200);
  --border-strong: var(--ink-300);

  --link: var(--green-700);
  --link-hover: var(--green-800);
  --link-prose: var(--kit-blue);

  --focus-ring: var(--kit-green);
  --focus-halo: #A3D9D2; /* static fallback, redeclared with color-mix below */
  --focus-halo: color-mix(in srgb, var(--kit-green) 28%, transparent);

  /* -- Gradients and overlays (§4.6) -- */
  --overlay-hero: linear-gradient(105deg, rgba(16,32,29,.90) 0%, rgba(16,32,29,.74) 38%, rgba(0,54,47,.42) 68%, rgba(0,54,47,.12) 100%);
  --grad-brand: linear-gradient(135deg, #009682 0%, #008170 55%, #00695B 100%);
  --grad-accent-rule: linear-gradient(90deg, #009682 0%, #61BEB2 100%);

  /* -- Typography (§5) -- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --fs-display: clamp(2.75rem, 5.2vw, 4.25rem);
  --fs-h1: 3rem;
  --fs-h2: 2.25rem;
  --fs-h3: 1.5rem;
  --fs-h4: 1.1875rem;
  --fs-lead: 1.25rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-meta: 0.8125rem;
  --fs-eyebrow: 0.75rem;
  --fs-nav: 0.9375rem;

  /* -- Spacing scale, 4px base (§6.1) -- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-28: 112px;
  --space-36: 144px;

  /* -- Container (§6.2) -- */
  --container-max: 1200px;
  --container-narrow: 760px;
  --container-gutter: clamp(20px, 5vw, 48px);

  /* -- Radius (§6.3) -- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* -- Shadows — green-black, layered (§6.4) -- */
  --shadow-xs: 0 1px 2px rgba(0,54,47,.06);
  --shadow-sm: 0 1px 2px rgba(0,54,47,.05), 0 2px 6px rgba(0,54,47,.05);
  --shadow-md: 0 2px 4px rgba(0,54,47,.05), 0 8px 20px rgba(0,54,47,.07);
  --shadow-lg: 0 4px 8px rgba(0,54,47,.06), 0 18px 40px rgba(0,54,47,.10);
  --shadow-nav: 0 1px 0 rgba(0,54,47,.06), 0 8px 28px rgba(0,54,47,.08);
  --shadow-focus: 0 0 0 3px var(--focus-halo);

  /* -- Motion (§6.5) -- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 520ms;

  /* -- Navbar (§7.3) -- */
  --nav-h: 84px;
  --nav-h-solid: 68px;

  /* -- Breakpoints (§12), referenced in comments; media queries can't read
        custom properties, kept here for documentation only -- */
  /* --bp-xl: 1200px; --bp-lg: 1100px; --bp-md: 900px; --bp-sm: 768px; --bp-xs: 640px; --bp-xxs: 420px; */
}

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