:root {
    /* Colors */
    --color-bg:           #ffffff;
    --color-surface:      #f5f5f5;
    --color-text:         #1a1a1a;
    --color-text-muted:   #666666;
    --color-accent:       #f97316;
    --color-accent-light: #fff3e8;
    --color-border:       #e5e7eb;
    --color-dark:         #1a1a1a;
    --color-white:        #ffffff;

    /* Typography */
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: 'Fira Code', 'Cascadia Code', monospace;

    --text-sm:   0.875rem;   /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-lg:   1.125rem;   /* 18px */
    --text-xl:   1.25rem;    /* 20px */
    --text-2xl:  1.5rem;     /* 24px */
    --text-3xl:  1.875rem;   /* 30px */
    --text-4xl:  2.25rem;    /* 36px */

    --leading-tight:  1.25;
    --leading-normal: 1.6;
    --leading-loose:  1.8;

    /* Spacing (8px base unit) */
    --space-1:  0.25rem;   /* 4px  */
    --space-2:  0.5rem;    /* 8px  */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-6:  1.5rem;    /* 24px */
    --space-8:  2rem;      /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */
    --space-20: 5rem;      /* 80px */
    --space-24: 6rem;      /* 96px */

    /* Layout */
    --container-max:  80rem;   /* 1280px */
    --article-max:    45rem;   /* 720px */
    --radius-sm:      0.25rem;
    --radius:         0.5rem;
    --radius-lg:      0.75rem;
}