/* ==========================================================================
   JJB Calibrated - design tokens
   Palette values sampled from client artwork. See ../../brand/BRAND_KIT.md
   ========================================================================== */

:root {
  /* ---- ground -------------------------------------------------------- */
  --ink-900: #040A07;
  --ink-800: #081410;
  --ink-700: #0E2118;
  --ink-600: #163023;

  /* ---- brand green ---------------------------------------------------- */
  --green-900: #08341E;
  --green-800: #0F4527;
  --green-700: #1E5028;
  --green-600: #276634;
  --green-500: #31803F;
  --green-400: #4C9A55;
  --green-300: #7BBB80;
  --green-200: #A9D8AA;
  --green-100: #CFF7CD;

  /* ---- signal --------------------------------------------------------- */
  --signal: #B9FDA8;
  --signal-dim: #8FD97E;

  /* ---- neutral -------------------------------------------------------- */
  --bone: #F4F6F3;
  --stone-200: #D6DDD7;
  --stone-400: #A3B2A6;
  --stone-600: #5D6C60;
  --stone-800: #2A332C;

  /* ---- supporting ----------------------------------------------------- */
  --teal-700: #1E4640;
  --teal-500: #2C7A6B;

  /* ---- semantic: dark surfaces (default) ------------------------------ */
  --bg: var(--ink-900);
  --text: var(--stone-200);
  --text-strong: var(--bone);
  --text-muted: var(--stone-400);
  --heading: var(--green-100);
  --rule: rgba(207, 247, 205, 0.10);

  /* ---- glass ---------------------------------------------------------- */
  --glass-fill-top: rgba(255, 255, 255, 0.075);
  --glass-fill-bottom: rgba(255, 255, 255, 0.022);
  --glass-blur: 28px;
  --glass-saturate: 165%;
  --glass-edge-light: rgba(255, 255, 255, 0.55);
  --glass-edge-mid: rgba(255, 255, 255, 0.06);
  --glass-edge-tint: rgba(185, 253, 168, 0.22);
  --glass-inset-top: rgba(255, 255, 255, 0.18);
  --glass-inset-bottom: rgba(0, 0, 0, 0.35);
  --glass-cast: 0 24px 70px -24px rgba(0, 0, 0, 0.85);

  /* ---- type ----------------------------------------------------------- */
  --font-display: "Outfit", "Century Gothic", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono", monospace;

  /* fluid type scale, 375px -> 1600px */
  --t-eyebrow: 0.6875rem;
  --t-body-sm: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --t-body: clamp(0.9375rem, 0.9rem + 0.18vw, 1.0625rem);
  --t-lead: clamp(1rem, 0.94rem + 0.34vw, 1.1875rem);
  --t-h4: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --t-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --t-h2: clamp(1.875rem, 1.4rem + 2vw, 3.5rem);
  /* Capped so the H1 sets in three lines, not four - a fourth line is what
     pushes the stat strip below the fold. */
  --t-h1: clamp(2.5rem, 1.35rem + 3.9vw, 5.25rem);

  /* Tight is the whole point. Display leading sits under 1. */
  --lh-tight: 0.92;
  --lh-heading: 1.08;
  --lh-body: 1.62;

  --track-display: -0.038em;
  --track-heading: -0.025em;
  --track-eyebrow: 0.18em;

  /* ---- space ---------------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  --section-y: clamp(3.25rem, 2.2rem + 4.2vw, 6rem);
  --gutter: clamp(1.25rem, 0.5rem + 2.4vw, 2.75rem);
  --measure: 58ch;
  --shell: 1560px;
  --shell-narrow: 980px;
  --header-h: 92px;

  /* ---- radius --------------------------------------------------------- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ---- motion --------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 720ms;
}

/* ---- light sections: same tokens, inverted roles ---------------------- */
.on-light {
  --bg: var(--bone);
  --text: var(--stone-800);
  --text-strong: var(--ink-900);
  --text-muted: var(--stone-600);
  --heading: var(--green-900);
  --rule: rgba(8, 52, 30, 0.12);

  --glass-fill-top: rgba(255, 255, 255, 0.72);
  --glass-fill-bottom: rgba(255, 255, 255, 0.42);
  --glass-edge-light: rgba(255, 255, 255, 0.95);
  --glass-edge-mid: rgba(8, 52, 30, 0.07);
  --glass-edge-tint: rgba(30, 80, 40, 0.16);
  --glass-inset-top: rgba(255, 255, 255, 0.9);
  --glass-inset-bottom: rgba(8, 52, 30, 0.06);
  --glass-cast: 0 20px 50px -22px rgba(8, 52, 30, 0.28);
}