@layer tokens {
  :root {
    color-scheme: light dark;

    /* ── Brand colors ──────────────────────────────── */
    --color-primary:    #1B4332;
    --color-primary-dk: #0D2B1F;
    --color-primary-lt: #2D6A4F;
    --color-accent:     #E8A020;
    --color-accent-dk:  #C47D10;
    --color-accent-lt:  #FFC940;
    --color-dark:       #0A1F14;
    --color-text:       #1C1C1E;
    --color-muted:      #6B7280;
    --color-surface:    #F8FAF9;
    --color-surface-2:  #EFF4F1;
    --color-border:     #D1D5DB;
    --color-white:      #FFFFFF;

    /* ── Gradients ─────────────────────────────────── */
    --grad-brand: linear-gradient(135deg, #1B4332 0%, #2D6A4F 100%);
    --grad-dark:  linear-gradient(135deg, #0A1F14 0%, #1B4332 100%);
    --grad-gold:  linear-gradient(135deg, #E8A020 0%, #FFC940 100%);
    --grad-hero:  linear-gradient(to bottom, rgba(10,31,20,.72) 0%, rgba(10,31,20,.45) 60%, rgba(10,31,20,.80) 100%);

    /* ── Typography ────────────────────────────────── */
    --font-heading: 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-body:    'Inter', system-ui, sans-serif;

    /* ── Fluid type scale ──────────────────────────── */
    --text-xs:   clamp(0.75rem,   1vw,   0.875rem);
    --text-sm:   clamp(0.875rem,  1.2vw, 1rem);
    --text-base: clamp(1rem,      1.5vw, 1.125rem);
    --text-lg:   clamp(1.125rem,  2vw,   1.375rem);
    --text-xl:   clamp(1.25rem,   2.5vw, 1.75rem);
    --text-2xl:  clamp(1.5rem,    3vw,   2.25rem);
    --text-3xl:  clamp(1.875rem,  4vw,   3rem);
    --text-4xl:  clamp(2.25rem,   5vw,   4rem);

    /* ── Fluid spacing ─────────────────────────────── */
    --space-xs:  clamp(4px,   1vw,  8px);
    --space-sm:  clamp(8px,   2vw,  16px);
    --space-md:  clamp(16px,  3vw,  24px);
    --space-lg:  clamp(24px,  4vw,  40px);
    --space-xl:  clamp(40px,  6vw,  64px);
    --space-2xl: clamp(64px,  8vw,  100px);

    /* ── Layout ────────────────────────────────────── */
    --container-max:    1200px;
    --container-narrow: 760px;
    --header-h:         72px;

    /* ── Shape ─────────────────────────────────────── */
    --radius-sm:   6px;
    --radius-md:   12px;
    --radius-lg:   20px;
    --radius-full: 9999px;

    /* ── Shadow ────────────────────────────────────── */
    --shadow-sm: 0 2px 8px  rgb(0 0 0 / 0.06);
    --shadow-md: 0 8px 32px rgb(0 0 0 / 0.10);
    --shadow-lg: 0 20px 60px rgb(0 0 0 / 0.15);

    /* ── Motion ────────────────────────────────────── */
    --ease:   cubic-bezier(0.4, 0, 0.2, 1);
    --fast:   0.15s;
    --normal: 0.25s;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --color-text:    #F0F4F2;
      --color-muted:   #9CA3AF;
      --color-surface: #0F2B1C;
      --color-surface-2: #1A3D2B;
      --color-border:  #2D4D3A;
      --color-white:   #0F2B1C;
    }
  }
}