:root {
    /* Colors — Light theme */
    --color-primary:     #2563eb;
    --color-primary-dark:#1d4ed8;
    --color-secondary:   #7c3aed;
    --color-accent:      #0891b2;

    --color-bg:          #ffffff;
    --color-bg-alt:      #f8fafc;
    --color-surface:     #ffffff;
    --color-text:        #1e293b;
    --color-text-muted:  #64748b;
    --color-border:      #e2e8f0;
    --color-shadow:      rgba(0, 0, 0, 0.08);

    --color-success:     #16a34a;
    --color-error:       #dc2626;

    /* Typography — fluid scale */
    --font-sans:  system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono:  'Cascadia Code', 'Fira Code', Consolas, monospace;

    --text-xs:    clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
    --text-sm:    clamp(0.875rem, 0.825rem + 0.25vw, 1rem);
    --text-base:  clamp(1rem,     0.95rem  + 0.25vw, 1.125rem);
    --text-lg:    clamp(1.125rem, 1rem     + 0.5vw,  1.375rem);
    --text-xl:    clamp(1.25rem,  1.1rem   + 0.75vw, 1.75rem);
    --text-2xl:   clamp(1.5rem,   1.25rem  + 1vw,    2.25rem);
    --text-3xl:   clamp(1.875rem, 1.5rem   + 1.5vw,  3rem);
    --text-4xl:   clamp(2.25rem,  1.75rem  + 2vw,    4rem);

    --leading-tight:  1.2;
    --leading-normal: 1.6;

    --weight-normal:   400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;

    /* Spacing scale */
    --space-xs:   0.25rem;
    --space-sm:   0.5rem;
    --space-md:   1rem;
    --space-lg:   1.5rem;
    --space-xl:   2rem;
    --space-2xl:  3rem;
    --space-3xl:  4rem;
    --space-4xl:  6rem;
    --space-5xl:  8rem;

    /* Layout */
    --container-sm:  40rem;
    --container-md:  48rem;
    --container-lg:  64rem;
    --container-xl:  80rem;

    /* Borders & Shapes */
    --radius-sm:  0.25rem;
    --radius-md:  0.5rem;
    --radius-lg:  1rem;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm:  0 1px 2px var(--color-shadow);
    --shadow-md:  0 4px 6px -1px var(--color-shadow), 0 2px 4px -2px var(--color-shadow);
    --shadow-lg:  0 10px 15px -3px var(--color-shadow), 0 4px 6px -4px var(--color-shadow);
    --shadow-xl:  0 20px 25px -5px var(--color-shadow), 0 8px 10px -6px var(--color-shadow);

    /* Transitions */
    --transition-fast:   150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow:   350ms ease;
}

/* Breakpoints (reference — cannot use custom properties in media queries)
   --bp-sm:  640px
   --bp-md:  768px
   --bp-lg:  1024px
   --bp-xl:  1280px
*/

/* Dark theme */
[data-theme="dark"] {
    --color-primary:     #60a5fa;
    --color-primary-dark:#3b82f6;
    --color-secondary:   #a78bfa;
    --color-accent:      #22d3ee;

    --color-bg:          #0f172a;
    --color-bg-alt:      #1e293b;
    --color-surface:     #1e293b;
    --color-text:        #f1f5f9;
    --color-text-muted:  #94a3b8;
    --color-border:      #334155;
    --color-shadow:      rgba(0, 0, 0, 0.3);

    --color-success:     #4ade80;
    --color-error:       #f87171;
}