:root {
  /* ═══════════════════════════════════════════════════════
     Pedal Design System — Color tokens (light theme)
     Primary accent: grass green #84B159
     Secondary: indigo navy #10288C / light blue #CBE2FE
     Ink: warm near-black #332B29
     ═══════════════════════════════════════════════════════ */

  /* ── Brand green ─────────────────────────────────── */
  --green-700: #4E6E32;
  --green-600: #67924A;
  --green-500: #84B159;
  --green-400: #9CC178;
  --green-300: #B7D49E;
  --green-200: #D3E6C2;
  --green-100: #E7F1DA;
  --green-50:  #F3F8EC;

  /* ── Brand navy / blue ───────────────────────────── */
  --navy-900: #0A1A60;
  --navy-700: #10288C;
  --navy-600: #243FAE;
  --navy-500: #3A5AD0;
  --blue-400: #6E8FE6;
  --blue-300: #9DB8F2;
  --blue-200: #CBE2FE;
  --blue-100: #E2EEFE;
  --blue-50:  #F1F6FF;

  /* ── Pink ────────────────────────────────────────── */
  --pink-300: #FFB6CE;
  --pink-200: #FFCFDF;
  --pink-100: #FFE8F0;
  --pink-50:  #FFF4F8;

  /* ── Ink (warm near-black) ───────────────────────── */
  --ink-900: #2A211F;
  --ink-800: #332B29;
  --ink-600: #5C534F;
  --ink-400: #948B86;
  --ink-200: #C9C2BC;

  /* ── Neutrals / surfaces ─────────────────────────── */
  --white:      #FFFFFF;
  --paper:      #FAF8F4;
  --sand:       #F2EEE7;
  --line-soft:  #E7E2DB;

  /* ── Pastel palette (section blocks) ─────────────── */
  --mint:    #DBFFF6;
  --sage:    #E7F2D8;
  --teal-pastel: #8BDFDD;
  --peach:   #FFD8CC;
  --cream:   #FFF2E0;
  --yellow:  #FFD876;
  --lemon:   #FFFEBD;
  --pink:    #FFE8F0;
  --lavender: #DBD4FF;
  --sky:     #CBE2FE;

  /* ── Illustration sticker palette ───────────────── */
  --illus-teal:   #4DA8A0;
  --illus-orange: #F4845F;
  --illus-navy:   #1A1A2E;
  --illus-cream:  #F8F7F4;
  --illus-grey:   #C4C4C4;

  /* ── Semantic status ─────────────────────────────── */
  --success:         #67924A;
  --success-surface: #E7F1DA;
  --warning:         #F8AB41;
  --warning-surface: #FFF2E0;
  --danger:          #FF4E4E;
  --danger-surface:  #FFE2E2;
  --info:            #3A5AD0;
  --info-surface:    #CBE2FE;

  /* ── Semantic aliases ────────────────────────────── */
  --accent:           var(--green-500);
  --accent-hover:     var(--green-600);
  --accent-pressed:   var(--green-700);
  --accent-contrast:  var(--white);
  --accent-surface:   var(--green-100);
  --accent-wash:      var(--green-50);

  --secondary:          var(--navy-700);
  --secondary-hover:    var(--navy-600);
  --secondary-pressed:  var(--navy-900);
  --secondary-contrast: var(--white);
  --secondary-surface:  var(--blue-200);
  --secondary-wash:     var(--blue-50);

  --text-primary:   var(--ink-800);
  --text-secondary: var(--ink-600);
  --text-muted:     var(--ink-400);
  --text-on-accent: var(--white);
  --text-on-dark:   var(--white);
  --text-link:      var(--green-700);

  --surface-page:   var(--white);
  --surface-sunken: var(--paper);
  --surface-card:   var(--white);
  --surface-dark:   var(--ink-800);

  --border-default: var(--ink-800);
  --border-strong:  var(--ink-900);
  --border-soft:    var(--line-soft);
  --border-accent:  var(--green-500);

  --focus-ring: var(--green-500);

  /* ═══════════════════════════════════════════════════════
     Typography
     ═══════════════════════════════════════════════════════ */
  --font-sans:    'Google Sans', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-display: var(--font-sans);
  --font-body:    var(--font-sans);
  --font-mono:    'SF Mono', ui-monospace, Menlo, Consolas, monospace;

  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 700;

  --text-overline: 12px;
  --text-caption:  13px;
  --text-sm:       0.875rem;
  --text-base:     1rem;
  --text-body-sm:  14px;
  --text-body:     16px;
  --text-body-lg:  18px;
  --text-lg:       1.125rem;
  --text-xl:       1.25rem;
  --text-2xl:      1.5rem;
  --text-h4:       20px;
  --text-h3:       24px;
  --text-3xl:      1.875rem;
  --text-h2:       32px;
  --text-4xl:      2.25rem;
  --text-h1:       40px;
  --text-5xl:      3rem;
  --text-display:  48px;
  --text-6xl:      3.75rem;
  --text-display-xl: 64px;

  --leading-tight:   1.05;
  --leading-snug:    1.18;
  --leading-normal:  1.5;
  --leading-relaxed: 1.6;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;

  /* ═══════════════════════════════════════════════════════
     Spacing, radii, borders, shadows, motion
     ═══════════════════════════════════════════════════════ */
  --space-0:  0;
  --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-24: 96px;
  --space-32: 128px;

  --radius-none: 0;
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  --border-width:       2px;
  --border-width-thick: 3px;
  --border:             2px solid var(--ink-800);
  --border-strong-style: 2px solid var(--ink-900);

  --shadow-hard-sm:     2px 2px 0 var(--ink-800);
  --shadow-hard:        4px 4px 0 var(--ink-800);
  --shadow-hard-lg:     6px 6px 0 var(--ink-800);
  --shadow-hard-accent: 4px 4px 0 var(--green-500);

  --shadow-sm: 0 1px 2px rgba(42,33,31,0.08);
  --shadow-md: 0 4px 12px rgba(42,33,31,0.10);
  --shadow-lg: 0 12px 32px rgba(42,33,31,0.12);

  --ease-standard: cubic-bezier(0.32, 0.72, 0.28, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  320ms;

  --container-max:       1200px;
  --container-wide:      1440px;
  --container-max-width: 1200px;
  --container-padding-x: 40px;

  --section-padding-y:    96px;
  --section-padding-y-sm: 64px;

  /* ── Legacy aliases (shared specialty pages) ─────── */
  --color-bg:             var(--white);
  --color-surface:        var(--paper);
  --color-surface-raised: var(--white);
  --color-border:         var(--line-soft);
  --color-text-primary:   var(--ink-800);
  --color-text-secondary: var(--ink-600);
  --color-text-muted:     var(--ink-400);
  --color-accent-blue:    var(--navy-500);
  --color-accent-green:   var(--green-500);
  --color-brand-teal:     var(--green-500);
  --color-brand-blue:     var(--navy-700);
  --color-brand-dark:     var(--green-700);
  --color-brand-blue-bg:  rgba(16, 40, 140, 0.08);
  --color-accent-peach:   var(--peach);
  --color-accent-yellow:  var(--yellow);
  --color-header-bg:          rgba(255, 255, 255, 0.95);
  --color-header-bg-scrolled: rgba(255, 255, 255, 1);
  --color-header-shadow:      rgba(0, 0, 0, 0.08);
  --color-tint-green: var(--green-100);
  --color-tint-blue:  var(--blue-100);
  --color-tint-teal:  var(--green-50);
  --color-tint-yellow: rgba(255, 216, 118, 0.25);
  --color-tint-ink:   rgba(51, 43, 41, 0.05);
  --shadow-card:     var(--shadow-hard-sm);
  --shadow-elevated: var(--shadow-hard);
  --transition-fast:   var(--dur-fast) var(--ease-standard);
  --transition-normal: var(--dur-base) var(--ease-standard);
  --transition-slow:   var(--dur-slow) var(--ease-standard);
  --z-base:    0;
  --z-card:    10;
  --z-sticky:  100;
  --z-nav:     200;
  --z-dropdown: 250;
  --z-modal:   300;
  --z-toast:   400;
  --z-tooltip: 500;

  color-scheme: light;
}

/* Respect reduced motion for anyone who lands on the site with
   a stored theme preference — we swap colors instantly so no
   extra transitions are introduced. */