/* === TOKENS === */
        :root {
        /* Colors - Light Mode */
            --color-bg-primary: #e8e4df;
            --color-bg-secondary: #f5f3f0;
            --color-bg-tertiary: #ddd9d4;
            --color-bg-card: #ffffff;
            --color-bg-card-hover: #fafafa;

            --color-text-primary: #2d2d2d;
            --color-text-secondary: #5a5a5a;
            --color-text-tertiary: #888888;

            --color-accent-primary: #c75c4a;
            --color-accent-secondary: #c75c4a;
            --color-accent-gradient: #c75c4a;
            --color-accent-glow: rgba(199, 92, 74, 0.2);

            --color-success: #27ae60;
            --color-border: rgba(0, 0, 0, 0.08);
            --color-border-hover: rgba(0, 0, 0, 0.15);

            /* Typography */
            --font-sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
            --font-display: 'Bricolage Grotesque', sans-serif;
            --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

            --text-xs: 0.75rem;
            --text-sm: 0.875rem;
            --text-base: 1rem;
            --text-lg: 1.125rem;
            --text-xl: 1.25rem;
            --text-2xl: 1.5rem;
            --text-3xl: 1.875rem;
            --text-4xl: 2.25rem;
            --text-5xl: 3rem;
            --text-6xl: 3.75rem;

            --leading-tight: 1.1;
            --leading-snug: 1.25;
            --leading-normal: 1.5;
            --leading-relaxed: 1.625;

            /* Spacing */
            --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;
            --space-32: 8rem;

            /* Layout */
            --max-width: 1200px;
            --content-width: 800px;
            --header-height: 65px;

            /* Borders */
            --radius-sm: 0.375rem;
            --radius-md: 0.5rem;
            --radius-lg: 0.75rem;
            --radius-xl: 1rem;
            --radius-2xl: 1.5rem;
            --radius-full: 9999px;

            /* Shadows */
            --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
            --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
            --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.12);
            --shadow-glow: 0 0 40px var(--color-accent-glow);

            /* Transitions */
            --transition-fast: 150ms ease;
            --transition-base: 250ms ease;
            --transition-slow: 400ms ease;
            --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
        }