/* ============================================================
   ZIP IT — Design Tokens
   Single source of truth for colour, type, space, motion.
   Edit values here; everything else references these vars.
   ============================================================ */
:root {
  /* ---- Brand palette ---- */
  --ink:        #0B0D12;   /* near-black — dark hero / footer base   */
  --ink-2:      #0F121A;   /* raised dark surface                    */
  --ink-3:      #161A24;   /* card on dark                           */
  --ink-line:   rgba(255,255,255,.09);

  --paper:      #FFFFFF;   /* light body base                        */
  --mist:       #F5F6F4;   /* light section tint (faint warm-grey)   */
  --mist-2:     #ECEEEA;
  --light-line: rgba(11,13,18,.10);

  --volt:       #C8F135;   /* the accent — electric lime             */
  --volt-bright:#D4FF4F;
  --volt-deep:  #7E9A12;   /* accessible volt for text-on-light      */

  /* ---- Text ---- */
  --on-dark:        #F6F7F9;
  --on-dark-muted:  rgba(246,247,249,.64);
  --on-dark-faint:  rgba(246,247,249,.42);
  --on-light:       #12151C;
  --on-light-muted: #565C66;
  --on-light-faint: #8A909A;

  /* ---- Typography ---- */
  --font-display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --font-body:    "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  /* Fluid type scale (clamp: min, fluid, max) */
  --fs-display: clamp(2.9rem, 1.4rem + 6.4vw, 6.5rem);
  --fs-h1:      clamp(2.3rem, 1.4rem + 3.6vw, 4rem);
  --fs-h2:      clamp(1.8rem, 1.2rem + 2.4vw, 2.9rem);
  --fs-h3:      clamp(1.3rem, 1.05rem + 1vw, 1.65rem);
  --fs-lead:    clamp(1.05rem, .98rem + .55vw, 1.3rem);
  --fs-body:    1.0625rem;
  --fs-small:   .9375rem;
  --fs-kicker:  .78rem;

  /* ---- Spacing scale ---- */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 8rem;   --sp-11: 11rem;

  /* ---- Layout ---- */
  --container: 1200px;
  --container-wide: 1400px;
  --gutter: clamp(1.25rem, 5vw, 4rem);

  /* ---- Radii ---- */
  --r-sm: 10px;  --r-md: 16px;  --r-lg: 22px;  --r-xl: 30px;  --r-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-sm:  0 1px 2px rgba(11,13,18,.06), 0 4px 12px rgba(11,13,18,.05);
  --shadow-md:  0 4px 14px rgba(11,13,18,.07), 0 18px 40px rgba(11,13,18,.08);
  --shadow-lg:  0 10px 30px rgba(11,13,18,.10), 0 30px 70px rgba(11,13,18,.12);
  --shadow-volt:0 10px 30px rgba(126,154,18,.30);

  /* ---- Motion ---- */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --dur-fast:  .18s;
  --dur:       .32s;
  --dur-slow:  .6s;
}