/* =========================================
           01. DESIGN TOKENS
        ========================================= */
        :root {
            /* Palette: Light-first, Editorial, Technical Studio */
            --bg-primary: #FAF9F6;       /* Warm editorial paper off-white */
            --bg-surface: #FFFFFF;       /* Crisp surface */
            --bg-subtle: #F1F3F5;        /* Neutral subtle fill */
            --bg-dark: #0F172A;         /* Slate deep navy */
            --bg-dark-surface: #1E293B;  /* Slate card fill */
            
            --text-main: #0F172A;        /* Charcoal main body */
            --text-muted: #475569;       /* Reader secondary text */
            --text-tertiary: #94A3B8;    /* Muted captions */
            --text-light: #F8FAFC;       /* White for dark backgrounds */
            --text-light-muted: #94A3B8;
            
            --border-color: #E2E8F0;
            --border-subtle: #EEF2F6;
            --border-dark: #334155;
            
            --accent: #1D4ED8;          /* Refined cobalt primary */
            --accent-hover: #1E40AF;
            --accent-light: #EFF6FF;
            --accent-subtle: rgba(29, 78, 216, 0.08);
            
            /* Typography */
            --font-main: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            
            /* Spacing Rhythm */
            --space-3xs: 0.25rem;  /* 4px */
            --space-2xs: 0.5rem;   /* 8px */
            --space-xs: 0.75rem;   /* 12px */
            --space-sm: 1rem;      /* 16px */
            --space-md: 1.5rem;    /* 24px */
            --space-lg: clamp(1.5rem, 4vw, 2.5rem);    /* 40px */
            --space-xl: clamp(2rem, 6vw, 4rem);      /* 64px */
            --space-2xl: clamp(3rem, 10vw, 7rem);     /* 112px */
            
            /* Structural Constraints */
            --container-max: 1280px;
            --header-height: calc(72px + env(safe-area-inset-top, 0px));
            
            /* Restrained Radius */
            --radius-sm: 4px;
            --radius-md: 8px;
            --radius-lg: 12px;
            
            /* Transitions */
            --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
            --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
            --transition-editorial: 400ms cubic-bezier(0.16, 1, 0.3, 1);
        }