/* ═══════════════════════════════════════════════════════════
   LIGHT MODE — Variable Overrides
   ═══════════════════════════════════════════════════════ */
body.light-mode {
    /* Canvas */
    --void: #FFFFFF;
    --surface: #F8FAFC;
    --surface-raised: #F1F5F9;
    --surface-overlay: rgba(241, 245, 249, 0.95);

    /* Corona — electric green to blue spectrum */
    --corona-deep: #1590C0;
    --corona: #1BA8E0;
    --corona-bright: #5CE0FF;
    --corona-glow: rgba(27, 168, 224, 0.15);
    --corona-glow-strong: rgba(27, 168, 224, 0.25);

    /* Text */
    --text-primary: #334155;
    --text-secondary: #475569;
    --text-muted: #94A3B8;

    /* Borders */
    --border-default: rgba(36, 137, 189, 0.15);
    --border-hover: rgba(36, 137, 189, 0.3);

    /* Gradients — blue to cyan spectrum */
    --grad-corona: linear-gradient(135deg, #1BA8E0, #5CE0FF);
    --grad-corona-border: linear-gradient(90deg, #1BA8E0, #5CE0FF);
    --gradient-brand: linear-gradient(135deg, #1BA8E0, #5CE0FF);

    /* Corona Backgrounds & Borders (semantic) */
    --corona-bg: rgba(36, 137, 189, 0.08);
    --corona-bg-subtle: rgba(36, 137, 189, 0.04);
    --corona-border-light: rgba(36, 137, 189, 0.2);
    --corona-border-subtle: rgba(36, 137, 189, 0.15);

    /* Cards */
    --bg-card: rgba(255, 255, 255, 0.5);

    /* Functional — darker for contrast */
    --success: #059669;
    --warning: #D97706;
    --danger: #DC2626;

    /* Legacy compat */
    --primary: #2489BD;
    --bg-canvas: #FFFFFF;
    --bg-primary: #F8FAFC;
    --bg-card: rgba(255, 255, 255, 0.8);
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    background: var(--void) !important;
    min-height: 100%;
    min-height: 100dvh;
}

body {
    font-family: 'Figtree', sans-serif;
    font-weight: 400;
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--void);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    min-height: 100vh;
    min-height: 100dvh;
}
