:root,
html.light {
    /* Common */
    --radius-sm: 8px;
    --radius-md: 8px;
    --radius-card: 12px;
    --radius-modal: 16px;

    /* Gradient accents */
    --gradient-primary: linear-gradient(135deg, #8B5CF6, #6D28D9);
    --gradient-primary-hover: linear-gradient(135deg, #7C3AED, #5B21B6);

    /* Glass surfaces (light mode) */
    --surface-glass: rgba(13, 19, 50, 0.03);
    --surface-glass-border: rgba(13, 19, 50, 0.08);

    /* 3-layer shadow system */
    --shadow-card: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-elevated: 0 4px 16px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
    --shadow-floating: 0 20px 60px rgba(0,0,0,0.20), 0 8px 24px rgba(0,0,0,0.12);

    /* Focus ring shorthand */
    --ring-primary: 0 0 0 3px var(--focus-ring);

    /* Spacing scale */
    --space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;

    /* Typography */
    --tracking-tight: -0.03em;
    --tracking-normal: 0em;
    --tracking-wide: 0.05em;
    --font-display: 'Instrument Serif', Georgia, serif;
    --font-body: 'DM Sans', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Icons (Lucide-like) */
    --icon-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2'/%3E%3Cpath d='M12 20v2'/%3E%3Cpath d='m4.93 4.93 1.41 1.41'/%3E%3Cpath d='m17.66 17.66 1.41 1.41'/%3E%3Cpath d='M2 12h2'/%3E%3Cpath d='M20 12h2'/%3E%3Cpath d='m6.34 17.66-1.41 1.41'/%3E%3Cpath d='m19.07 4.93-1.41 1.41'/%3E%3C/svg%3E");
    --icon-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'/%3E%3C/svg%3E");
    --icon-undo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E");
    --icon-help: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
    --icon-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6'/%3E%3Cpath d='M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2'/%3E%3C/svg%3E");
    --icon-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
    --icon-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' x2='12' y1='15' y2='3'/%3E%3C/svg%3E");
    --icon-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");

    /* Nav Icons */
    --icon-nav-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
    --icon-nav-create: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
    --icon-nav-library: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 17V2a2 2 0 0 1 2-2h10'/%3E%3Cpath d='M22 18v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10'/%3E%3Cpath d='M22 14H10'/%3E%3C/svg%3E");
    --icon-nav-campaigns: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 18-5v12L3 14v-3z'/%3E%3Cpath d='M11.6 16.8 a3 3 0 1 1-5.8-1.2'/%3E%3C/svg%3E");
    --icon-nav-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='4' rx='2' ry='2'/%3E%3Cline x1='16' x2='16' y1='2' y2='6'/%3E%3Cline x1='8' x2='8' y1='2' y2='6'/%3E%3Cline x1='3' x2='21' y1='10' y2='10'/%3E%3C/svg%3E");
    --icon-nav-analytics: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' x2='18' y1='20' y2='10'/%3E%3Cline x1='12' x2='12' y1='20' y2='4'/%3E%3Cline x1='6' x2='6' y1='20' y2='16'/%3E%3C/svg%3E");
    --icon-nav-brain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 4.44-2.04z'/%3E%3Cpath d='M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-4.44-2.04z'/%3E%3C/svg%3E");
    --icon-nav-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
    --icon-nav-help: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");

    /* Editor Toolbar Icons */
    --icon-bold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 12a4 4 0 0 0 0-8H6v8'/%3E%3Cpath d='M15 20a4 4 0 0 0 0-8H6v8Z'/%3E%3C/svg%3E");
    --icon-italic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' x2='10' y1='4' y2='4'/%3E%3Cline x1='14' x2='5' y1='20' y2='20'/%3E%3Cline x1='15' x2='9' y1='4' y2='20'/%3E%3C/svg%3E");
    --icon-underline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4v6a6 6 0 0 0 12 0V4'/%3E%3Cline x1='4' x2='20' y1='20' y2='20'/%3E%3C/svg%3E");
    --icon-strike: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4H9a3 3 0 0 0-2.83 4'/%3E%3Cpath d='M14 12a4 4 0 0 1 0 8H6'/%3E%3Cline x1='4' x2='20' y1='12' y2='12'/%3E%3C/svg%3E");
    --icon-ul: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' x2='21' y1='6' y2='6'/%3E%3Cline x1='8' x2='21' y1='12' y2='12'/%3E%3Cline x1='8' x2='21' y1='18' y2='18'/%3E%3Cline x1='3' x2='3.01' y1='6' y2='6'/%3E%3Cline x1='3' x2='3.01' y1='12' y2='12'/%3E%3Cline x1='3' x2='3.01' y1='18' y2='18'/%3E%3C/svg%3E");
    --icon-ol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='10' x2='21' y1='6' y2='6'/%3E%3Cline x1='10' x2='21' y1='12' y2='12'/%3E%3Cline x1='10' x2='21' y1='18' y2='18'/%3E%3Cpath d='M4 6h1v4'/%3E%3Cpath d='M4 10h2'/%3E%3Cpath d='M6 18H4c0-1 2-2 2-3s-1-1.5-2-1'/%3E%3C/svg%3E");
    --icon-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
    --icon-unlink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 7h2a5 5 0 0 1 0 10h-2m-6 0H7A5 5 0 0 1 7 7h2'/%3E%3Cline x1='8' x2='16' y1='12' y2='12'/%3E%3Cline x1='2' x2='22' y1='2' y2='22'/%3E%3C/svg%3E");
    --icon-redo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 7V5c0-1.1-.9-2-2-2h-2'/%3E%3Cpath d='M21 7h-2c-1.1 0-2 .9-2 2v2'/%3E%3Cpath d='M3 17a2 2 0 0 1 2-2h4'/%3E%3Cpath d='M3 17v2c0 1.1.9 2 2 2h2'/%3E%3Cpath d='M21 7v10a4 4 0 0 1-4 4H7'/%3E%3Cpath d='m17 3-4 4 4 4'/%3E%3C/svg%3E");
    --icon-outdent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 18-6-6 6-6'/%3E%3Cpath d='M12 6h9'/%3E%3Cpath d='M12 12h9'/%3E%3Cpath d='M12 18h9'/%3E%3C/svg%3E");
    --icon-indent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 6 6 6-6 6'/%3E%3Cpath d='M21 12H12'/%3E%3Cpath d='M3 6h9'/%3E%3Cpath d='M3 12h9'/%3E%3Cpath d='M3 18h9'/%3E%3C/svg%3E");
    --icon-clear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.9-9.9c1-1 2.5-1 3.4 0l4.3 4.3c1 1 1 2.5 0 3.4l-9.9 9.9c-1 1-2.5 1-3.4 0Z'/%3E%3Cpath d='m22 21-8.2-.1'/%3E%3Cpath d='m7 11 9 9'/%3E%3C/svg%3E");
    --icon-quote: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21c3 0 7-1 7-8V5c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h4c0 3.5-1 4.5-5 5'/%3E%3Cpath d='M15 21c3 0 7-1 7-8V5c0-1.1-.9-2-2-2h-4c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h4c0 3.5-1 4.5-5 5'/%3E%3C/svg%3E");
    --icon-align-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='17' x2='3' y1='6' y2='6'/%3E%3Cline x1='21' x2='3' y1='12' y2='12'/%3E%3Cline x1='15' x2='3' y1='18' y2='18'/%3E%3C/svg%3E");
    --icon-align-center: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' x2='6' y1='6' y2='6'/%3E%3Cline x1='21' x2='3' y1='12' y2='12'/%3E%3Cline x1='18' x2='6' y1='18' y2='18'/%3E%3C/svg%3E");
    --icon-align-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='21' x2='7' y1='6' y2='6'/%3E%3Cline x1='21' x2='3' y1='12' y2='12'/%3E%3Cline x1='21' x2='9' y1='18' y2='18'/%3E%3C/svg%3E");
    --icon-align-justify: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='21' x2='3' y1='6' y2='6'/%3E%3Cline x1='21' x2='3' y1='12' y2='12'/%3E%3Cline x1='21' x2='3' y1='18' y2='18'/%3E%3C/svg%3E");
    --icon-more: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' x2='12' y1='12' y2='12'/%3E%3Cline x1='12' x2='19' y1='12' y2='12'/%3E%3Cpolyline points='12 5 12 12 12 19'/%3E%3C/svg%3E");
    --icon-hr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' x2='21' y1='12' y2='12'/%3E%3C/svg%3E");

    /* Platform Tokens */
    --plat-facebook: #1877F2;
    --plat-facebook-rgb: 24, 119, 242;
    --plat-instagram: #E4405F;
    --plat-instagram-rgb: 228, 64, 95;
    --plat-x: #0F1419;
    --plat-x-rgb: 15, 20, 25;
    --plat-linkedin: #0A66C2;
    --plat-linkedin-rgb: 10, 102, 194;
    --plat-blog: #FF5722;
    --plat-blog-rgb: 255, 87, 34;

    /* Semantic Tokens */
    --info: #3B82F6;
    --info-bg: rgba(59, 130, 246, 0.1);
    --success: #10B981;
    --success-light: #86EFAC;
    --success-bg: rgba(16, 185, 129, 0.1);
    --warning: #F59E0B;
    --warning-bg: rgba(245, 158, 11, 0.1);
    --danger: #EF4444;
    --danger-hover: #DC2626;
    --danger-bg: rgba(239, 68, 68, 0.1);
    --neutral: #64748B;
    --neutral-bg: rgba(100, 116, 139, 0.1);

    /* Approval workflow status colors */
    --status-draft: #64748B;
    --status-draft-bg: rgba(100, 116, 139, 0.1);
    --status-review: #F59E0B;
    --status-review-bg: rgba(245, 158, 11, 0.1);
    --status-approved: #10B981;
    --status-approved-bg: rgba(16, 185, 129, 0.1);
    --status-rejected: #EF4444;
    --status-rejected-bg: rgba(239, 68, 68, 0.1);

    /* Viz Colors */
    --viz-1: #6366F1;
    --viz-2: #FFA6A0;
    --viz-3: #22C55E;
    --viz-4: #F59E0B;
    --viz-5: #EF4444;

    /* Light Theme Surface/Text */
    --bg: #F4F6FB;
    --surface-0: #F4F6FB;
    --surface-1: #FFFFFF;
    --surface-2: #F0F3FA;
    --surface-3: #E8EDF8;
    --overlay: rgba(15, 23, 42, 0.5);

    --border: #E2E8F5;
    --border-subtle: #EEF2FB;
    --border-strong: #C8D3ED;

    --text: #0D1332;
    --text-1: #0D1332;
    --text-2: #3D4E7A;
    --text-muted: #7685AB;
    --text-disabled: #B0BCDA;

    --primary: #8B5CF6;
    --primary-hover: #7C3AED;
    --focus-ring: rgba(139,92,246,.2);

    /* Premium shadows (light) */
    --shadow-subtle: 0 1px 2px rgba(13,19,50,.05),0 4px 12px rgba(13,19,50,.08),0 0 0 1px var(--border);
    --shadow-elevation: 0 4px 16px rgba(13,19,50,.12),0 0 0 1px var(--border-strong);
    --card-shadow: var(--shadow-elevation);

    /* Background accents (light) */
    --bg-accent-1: rgba(139,92,246,.07);
    --bg-accent-2: rgba(139,92,246,.07);

    /* Sidebar + Topbar semantics (light) */
    --sidebar-bg: #0D1332;
    --sidebar-border: rgba(255,255,255,.06);
    --sidebar-text: rgba(176,188,220,.9);
    --sidebar-muted: rgba(107,122,159,.8);
    --sidebar-hover: rgba(255,255,255,.06);
    --sidebar-active-bg: rgba(139,92,246,.16);
    --sidebar-active-rail: #A78BFA;
    --topbar-bg: rgba(255,255,255,.95);

    /* Legacy mapping */
    --primary-color: var(--primary);
    --bg-main: var(--bg);
    --bg-sidebar: var(--sidebar-bg);
    --text-main: var(--text);
    --border-color: var(--border);
}

/* Dark Theme Overrides */
html.dark {
    --bg: #06050C;
    --surface-0: #06050C;
    --surface-1: #0C0A18;
    --surface-2: #131024;
    --surface-3: #1A1530;
    --overlay: rgba(0, 0, 0, 0.7);
    --border: rgba(255,255,255,.07);
    --border-subtle: rgba(255,255,255,.04);
    --border-strong: rgba(255,255,255,.14);
    --text: #F0F4FF;
    --text-1: #F0F4FF;
    --text-2: #B8C4E0;
    --text-muted: #6B7A9F;
    --text-disabled: #3D4A6B;

    --primary: #8B5CF6;
    --primary-hover: #A78BFA;
    --focus-ring: rgba(139,92,246,.35);

    /* Premium glow shadows (dark) */
    --shadow-glow-sm: 0 1px 3px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.04);
    --shadow-glow-md: 0 4px 12px rgba(0,0,0,.5),0 16px 40px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.06);
    --shadow-glow-primary: 0 0 18px rgba(139, 92, 246, 0.35);
    --card-shadow: var(--shadow-glow-sm);
    --shadow-card: 0 1px 3px rgba(0,0,0,0.40), 0 1px 2px rgba(0,0,0,0.30);
    --shadow-elevated: 0 4px 16px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.35);

    /* Glass surfaces (dark) */
    --surface-glass: rgba(255, 255, 255, 0.06);
    --surface-glass-border: rgba(255, 255, 255, 0.10);

    /* Background accents (dark) */
    --bg-accent-1: rgba(139,92,246,.10);
    --bg-accent-2: rgba(139,92,246,.08);

    /* Sidebar + Topbar semantics (dark) */
    --sidebar-bg: #04030A;
    --sidebar-border: rgba(255,255,255,.05);
    --sidebar-text: rgba(176,188,220,.9);
    --sidebar-muted: rgba(107,122,159,.8);
    --sidebar-hover: rgba(255,255,255,.05);
    --sidebar-active-bg: rgba(139,92,246,.14);
    --sidebar-active-rail: #8B5CF6;
    --topbar-bg: rgba(6,5,12,.92);

    /* Legacy mapping */
    --bg-main: var(--bg);
    --bg-sidebar: var(--sidebar-bg);
    --text-main: var(--text);
    --border-color: var(--border);

    /* Invert SVG icons for dark mode */
    --icon-filter: invert(1) brightness(2);
}

/* Base Normalization — scoped to #app-root for specificity without !important */
#app-root button,
#app-root input,
#app-root textarea,
#app-root select,
#app-root .ui-input {
    border-radius: var(--radius-md);
    font-family: var(--font-body);
}

/* Button Variants */
#app-root .btn-primary,
#app-root button:not([class]),
#app-root .btn-primary-outline,
#app-root .social-btn,
#app-root .blog-btn--primary {
    border-radius: var(--radius-md);
    background: var(--primary);
    color: white;
    border: 1px solid var(--primary);
    transition: all 0.2s ease;
}

#app-root .btn-primary:hover,
#app-root button:not([class]):hover,
#app-root .blog-btn--primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    opacity: 1;
}

#app-root .btn-secondary,
#app-root .blog-btn--secondary {
    background: var(--surface-2);
    color: var(--text-2);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-md);
}

#app-root .btn-ghost,
#app-root .btn-secondary-outline,
#app-root .blog-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius-md);
}

#app-root .btn-ghost:hover,
#app-root .blog-btn:hover {
    background: var(--surface-2);
}

/* Inputs Normalization */
#app-root input[type="text"],
#app-root input[type="password"],
#app-root input[type="datetime-local"],
#app-root textarea,
#app-root select,
#app-root .create-input,
#app-root .create-textarea,
#app-root .ui-input,
#app-root .blog-topic-input,
#app-root .blog-title-input,
#app-root .blog-context-input {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 8px 12px;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

#app-root input:focus,
#app-root textarea:focus,
#app-root select:focus,
#app-root .ui-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

#app-root input::placeholder,
#app-root textarea::placeholder {
    color: var(--text-muted);
}

/* Cards & Elevation */
#app-root .card,
#app-root .create-card,
#app-root .provider-card,
#app-root .auth-box,
#app-root .brain-card,
#app-root .blog-checklist,
#app-root .analytics-card {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--card-shadow);
    overflow: hidden;
}

/* Page Headers */
#app-root .page-header,
#app-root .brain-header,
#app-root .drawer-header,
#app-root .analytics-page-header {
    padding: 24px 0;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border);
}

#app-root .page-header h1,
#app-root .brain-header h2,
#app-root .drawer-title,
#app-root .analytics-page-header h1 {
    font-size: 28px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 4px 0;
}

#app-root .subtext,
#app-root .create-helper-text,
#app-root .brain-header p,
#app-root .analytics-page-header .subtext {
    font-size: 14px;
    color: var(--text-muted);
}

/* Tabs / Segmented Controls */
#app-root .brain-tabs,
#app-root .create-preview-tabs,
#app-root .segmented-control {
    display: inline-flex;
    background: var(--surface-2);
    padding: 4px;
    border-radius: 10px;
    gap: 2px;
    border: none;
}

#app-root .brain-tab,
#app-root .preview-tab,
#app-root .segmented-item {
    background: transparent;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
    margin: 0;
}

#app-root .brain-tab:hover,
#app-root .preview-tab:hover {
    color: var(--text);
}

#app-root .brain-tab[aria-selected="true"],
#app-root .preview-tab.active,
#app-root .preview-tab[aria-selected="true"] {
    background: var(--surface-1);
    color: var(--primary);
    box-shadow: var(--shadow-subtle);
}

/* Sliders */
input[type="range"] {
    accent-color: var(--primary);
}