/* ─── DESIGN TOKENS ─── */

    :root, [data-theme="light"] {
      --color-bg:              #f0f0ec;
      --color-surface:         #f5f5f1;
      --color-surface-2:       #fafaf8;
      --color-surface-offset:  #e8e8e4;
      --color-surface-offset-2:#e0e0dc;
      --color-surface-dynamic: #d8d8d4;
      --color-divider:         #d0d0cc;
      --color-border:          #c4c4c0;
      --color-text:            #1a1a16;
      --color-text-muted:      #6a6a66;
      --color-text-faint:      #b0b0ac;
      --color-text-inverse:    #f5f5f1;
      --color-primary:         #00a878;
      --color-primary-hover:   #008a60;
      --color-primary-active:  #006a48;
      --color-primary-highlight: #c0e8d8;
      --color-accent-dim:      oklch(from #00a878 l c h / 0.10);
      --shadow-sm:  0 1px 3px oklch(0.15 0.01 160 / 0.08);
      --shadow-md:  0 4px 16px oklch(0.15 0.01 160 / 0.10);
      --shadow-lg:  0 12px 40px oklch(0.15 0.01 160 / 0.14);
      --radius-sm:  0.375rem;
      --radius-md:  0.5rem;
      --radius-lg:  0.75rem;
      --radius-xl:  1rem;
      --radius-2xl: 1.5rem;
      --radius-full: 9999px;
      --font-mono:  'JetBrains Mono', 'Fira Code', monospace;
      --font-body:  'Inter', system-ui, sans-serif;
      --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);
      --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
      --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
      --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
      --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
      --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
      --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
      --text-3xl:  clamp(2.5rem,   1rem    + 4vw,    5rem);
      --text-hero: clamp(3rem,     0.5rem  + 7vw,    7.5rem);
      --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
      --space-4: 1rem;    --space-5: 1.25rem; --space-6: 1.5rem;
      --space-8: 2rem;    --space-10: 2.5rem; --space-12: 3rem;
      --space-16: 4rem;   --space-20: 5rem;   --space-24: 6rem;
      --content-narrow: 640px;
      --content-default: 960px;
      --content-wide: 1200px;
    }

    [data-theme="dark"] {
      --color-bg:              #0e0f0d;
      --color-surface:         #131410;
      --color-surface-2:       #181a15;
      --color-surface-offset:  #1e201a;
      --color-surface-offset-2:#232520;
      --color-surface-dynamic: #2a2d26;
      --color-divider:         #2e3028;
      --color-border:          #383c30;
      --color-text:             #d8d8d0;
      --color-text-muted:      #787870;
      --color-text-faint:      #545450;
      --color-text-inverse:    #131410;
      --color-primary:         #2ec896;
      --color-primary-hover:   #1aaa7c;
      --color-primary-active:  #0f8a60;
      --color-primary-highlight: #1a3028;
      --color-accent-dim:      oklch(from #2ec896 l c h / 0.12);
      --shadow-sm:  0 1px 3px oklch(0 0 0 / 0.25);
      --shadow-md:  0 4px 16px oklch(0 0 0 / 0.35);
      --shadow-lg:  0 12px 40px oklch(0 0 0 / 0.50);
    }

    @media (prefers-color-scheme: dark) {
      :root:not([data-theme]) {
        --color-bg: #0e0f0d; --color-surface: #131410; --color-surface-2: #181a15;
        --color-surface-offset: #1e201a; --color-surface-offset-2: #232520;
        --color-surface-dynamic: #2a2d26; --color-divider: #2e3028; --color-border: #383c30;
        --color-text: #d8d8d0; --color-text-muted: #787870; --color-text-faint: #545450;
        --color-text-inverse: #131410; --color-primary: #2ec896;
        --color-primary-hover: #1aaa7c; --color-primary-active: #0f8a60;
        --color-primary-highlight: #1a3028; --color-accent-dim: oklch(from #2ec896 l c h / 0.12);
        --shadow-sm: 0 1px 3px oklch(0 0 0 / 0.25); --shadow-md: 0 4px 16px oklch(0 0 0 / 0.35);
        --shadow-lg: 0 12px 40px oklch(0 0 0 / 0.50);
      }
    }

/* ─── RESET & BASE ─── */

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html {
      scroll-behavior: smooth;
      scroll-padding-top: 5rem;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
    }
    body {
      min-height: 100dvh;
      font-family: var(--font-body);
      font-size: var(--text-base);
      color: var(--color-text);
      background-color: var(--color-bg);
      line-height: 1.6;
      overflow-x: hidden;
    }
    img, svg { display: block; max-width: 100%; height: auto; }
    ul[role="list"] { list-style: none; }
    h1, h2, h3, h4 { text-wrap: balance; line-height: 1.15; }
    p, li { text-wrap: pretty; }
    a, button, [role="button"] {
      transition: color var(--transition), background var(--transition),
                  border-color var(--transition), box-shadow var(--transition), opacity var(--transition);
    }
    button { cursor: pointer; background: none; border: none; font: inherit; color: inherit; }
    ::selection { background: oklch(from var(--color-primary) l c h / 0.25); color: var(--color-text); }
    :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-sm); }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }

/* ─── SKIP LINK ─── */

    .skip-link {
      position: absolute; top: -100%; left: var(--space-4);
      padding: var(--space-2) var(--space-4);
      background: var(--color-primary); color: var(--color-text-inverse);
      border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 600;
      z-index: 9999; text-decoration: none;
    }
    .skip-link:focus { top: var(--space-4); }