/* ==========================================================================
   KNEST Design Tokens
   Single source of truth for colour, type, spacing, motion.
   Sourced from the 2025 KNEST Brand Playbook.
   ========================================================================== */

:root {
  /* --- Brand colour: primary --- */
  --knest-green:        #07542b;  /* Deep green  — primary */
  --knest-orange:       #f47d20;  /* Orange      — primary accent */
  --knest-green-bright: #0ca94b;  /* Bright green — secondary */

  /* --- Green tints (playbook colour space) --- */
  --green-700: #07542b;
  --green-500: #0ca94b;
  --green-300: #6cb089;
  --green-100: #cfe3d6;
  --green-050: #eef5ef;

  /* --- Orange tints --- */
  --orange-500: #f47d20;
  --orange-300: #f7a661;
  --orange-100: #fcdcc0;
  --orange-050: #fef3e8;

  /* --- Neutrals --- */
  --ink:        #1a2420;  /* near-black with green cast for body text */
  --ink-soft:   #3f4a44;
  --muted:      #6a746e;
  --line:       #e2e8e4;  /* hairline borders */
  --surface:    #ffffff;
  --surface-2:  #f6f9f7;  /* off-white section bg */
  --surface-3:  #eef5ef;

  /* --- Semantic roles --- */
  --bg:           var(--surface);
  --bg-alt:       var(--surface-2);
  --text:         var(--ink);
  --text-muted:   var(--muted);
  --border:       var(--line);
  --brand:        var(--knest-green);
  --brand-accent: var(--knest-orange);

  /* --- Focus ring (accessibility) --- */
  --focus-ring: 3px solid #1769ff;
  --focus-offset: 2px;

  /* --- Typography ---
     Display: Archivo Expanded — dense, characterful grotesk channelling the
     playbook's Helvetica-Condensed-Bold campaign voice ("heroic, mobilizing").
     Body: Archivo — same family, clean and legible at small sizes. */
  --font-sans: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Archivo Expanded", "Archivo", system-ui, sans-serif;

  /* Fluid type scale — clamp(min, fluid, max). Mobile-first. */
  --fs-300: clamp(0.78rem, 0.76rem + 0.10vw, 0.84rem);   /* small print */
  --fs-400: clamp(0.95rem, 0.92rem + 0.15vw, 1.05rem);   /* body */
  --fs-500: clamp(1.10rem, 1.02rem + 0.40vw, 1.35rem);   /* lead */
  --fs-600: clamp(1.35rem, 1.15rem + 1.00vw, 1.95rem);   /* h3 */
  --fs-700: clamp(1.70rem, 1.30rem + 2.00vw, 2.75rem);   /* h2 */
  --fs-800: clamp(2.10rem, 1.50rem + 3.20vw, 3.75rem);   /* h1 */
  --fs-900: clamp(2.60rem, 1.70rem + 4.60vw, 5.00rem);   /* hero display */

  --lh-tight: 1.08;
  --lh-snug:  1.25;
  --lh-base:  1.65;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  /* --- Spacing scale (rem) --- */
  --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 vertical rhythm — fluid */
  --section-y: clamp(3rem, 2rem + 5vw, 6.5rem);

  /* --- Layout --- */
  --container-max: 1200px;
  --container-wide: 1320px;
  --container-pad: clamp(1rem, 0.5rem + 3vw, 2.5rem);

  /* --- Radius --- */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* --- Shadow (used sparingly) --- */
  --shadow-sm: 0 1px 2px rgba(7, 84, 43, 0.06), 0 1px 3px rgba(7, 84, 43, 0.08);
  --shadow-md: 0 4px 12px rgba(7, 84, 43, 0.08), 0 2px 4px rgba(7, 84, 43, 0.06);
  --shadow-lg: 0 12px 32px rgba(7, 84, 43, 0.12), 0 4px 8px rgba(7, 84, 43, 0.06);

  /* --- Motion --- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur-mid: 280ms;
  --dur-slow: 520ms;

  /* --- Z-index scale --- */
  --z-header: 100;
  --z-overlay: 200;
  --z-a11y: 300;
  --z-skiplink: 400;
}

/* Touch targets stay generous on coarse pointers (phones) */
@media (pointer: coarse) {
  :root { --tap-min: 48px; }
}
:root { --tap-min: 44px; }