:root {
    /* Colors - Light Theme */
    --color-primary: #0010CC;
    --color-primary-hover: #000EAA;
    
    --color-gradient-start: #0055AA;
    --color-gradient-end: #37C7FF;
    --color-gradient: linear-gradient(135deg, var(--color-gradient-start), var(--color-gradient-end));
    
    --color-mid: #0086E3;
    
    --color-ink: #0A1128;
    --color-ink-light: #2A3148;
    --color-ink-lighter: #5A6178;
    
    --color-gold: #F5B700;
    
    --color-surface: #F4F6FC;
    --color-surface-hover: #E4E6EC;
    
    --color-bg: #FFFFFF;

    --color-border: #E0E4F0;
    
    /* Typography */
    --font-display: 'Be Vietnam Pro', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    
    --font-size-base: 15.5px;
    --font-size-h1: 44px;
    --font-size-h2: 28px;
    --font-size-h3: 18px;
    --font-size-caption: 12.5px;
    --font-size-mono: 12px;
    
    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 48px;
    
    /* Borders */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-round: 999px;
    
    /* Shadows */
    --shadow-sm: 0 2px 6px rgba(10, 17, 40, 0.08);
    --shadow-md: 0 4px 16px rgba(10, 17, 40, 0.12);
    --shadow-lg: 0 12px 32px rgba(10, 17, 40, 0.16);
    
    /* Layout */
    --top-bar-height: 24px;
    --header-height: 64px;
    --sidebar-left-width: 280px;
    --sidebar-right-width: 320px;
}

body.dark-mode {
    --color-ink: #E8ECF4;
    --color-ink-light: #C8CCF4;
    --color-ink-lighter: #989CA4;
    
    --color-surface: #1A2238;
    --color-surface-hover: #2A3248;

    --color-bg: #0A1128;

    --color-border: #2A3148;
}

/* Adjust font sizes based on user preference */
body.font-size-large {
    --font-size-base: 18px;
    --font-size-h1: 50px;
    --font-size-h2: 32px;
    --font-size-h3: 20px;
    --font-size-caption: 14px;
    --font-size-mono: 14px;
}

body.font-size-small {
    --font-size-base: 14px;
    --font-size-h1: 38px;
    --font-size-h2: 24px;
    --font-size-h3: 16px;
    --font-size-caption: 11px;
    --font-size-mono: 11px;
}

@media (min-width: 1200px) {
    :root {
        --font-size-h1: 52px;
        --font-size-h2: 32px;
        --font-size-h3: 20px;
    }
}