:root {
    --bg-deep: #000000;
    --bg-surface: #0a0a0a;
    --text: #ffffff;
    --text-muted: #8e9192;
    --accent: #ffffff;
    --accent-rgb: 255, 255, 255;
    --accent-secondary: #8e9192;
    --accent-secondary-rgb: 142, 145, 146;
    --accent-dim: rgba(255, 255, 255, 0.15);
    
    --glass-bg: #0d0d0d;
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-highlight: rgba(255, 255, 255, 0.05);
    --glass-blur: 0px;
    --glass-shadow: 0 24px 64px rgba(0, 0, 0, 0.7);
    --glass: var(--glass-bg);
    
    --border-gradient-start: rgba(255, 255, 255, 0.2);
    --border-gradient-end: rgba(255, 255, 255, 0.02);
    --border-gradient-hover-start: rgba(255, 255, 255, 0.45);
    --border-gradient-hover-end: rgba(255, 255, 255, 0.08);

    --gradient-default: #ffffff;
    --gradient-label: #ffffff;
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --font-display: "Syne", system-ui, sans-serif;
    --font-body: "DM Sans", system-ui, sans-serif;

    /* ── NEOM Blue gradient palette ── */
    --neom-1: #00c6ff;        /* electric cyan  */
    --neom-2: #0066ff;        /* vivid sapphire */
    --neom-3: #003aaa;        /* deep royal     */
    --neom-glow: rgba(0, 102, 255, 0.35);
    --neom-glow-strong: rgba(0, 198, 255, 0.55);
    /* Border gradients */
    --neom-border-start: rgba(0, 198, 255, 0.75);
    --neom-border-mid:   rgba(0, 102, 255, 0.55);
    --neom-border-end:   rgba(0, 58,  170, 0.20);
    /* Hover border (brighter) */
    --neom-border-hover-start: rgba(0, 220, 255, 1);
    --neom-border-hover-mid:   rgba(0, 130, 255, 0.80);
    --neom-border-hover-end:   rgba(0, 80,  200, 0.35);

    /* Solid border tokens (used by icon badges, section-toggle, tech panel, etc.) */
    --border:       rgba(0, 140, 255, 0.30);
    --border-hover: rgba(0, 198, 255, 0.65);

    /* ── Neon Silver icon border palette ── */
    --icon-border-start: rgba(255, 255, 255, 1);      /* pure silver-white    */
    --icon-border-mid:   rgba(200, 210, 230, 0.85);   /* bright chrome silver */
    --icon-border-end:   rgba(140, 155, 185, 0.50);   /* solid steel          */
    /* Hover (full-chrome shimmer) */
    --icon-border-hover-start: rgba(255, 255, 255, 1);
    --icon-border-hover-mid:   rgba(215, 230, 255, 0.95);
    --icon-border-hover-end:   rgba(160, 180, 230, 0.70);

    /* Premium card styles — borders wired to NEOM blue */
    --card-bg-start: #0a0d14;
    --card-bg-end: #05070d;
    --card-border-start: var(--neom-border-start);
    --card-border-mid:   var(--neom-border-mid);
    --card-border-end:   var(--neom-border-end);
    --card-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), 0 0 0 0px var(--neom-glow);
    
    --card-hover-bg-start: #0d1220;
    --card-hover-bg-end: #080c18;
    --card-hover-border-start: var(--neom-border-hover-start);
    --card-hover-border-mid:   var(--neom-border-hover-mid);
    --card-hover-border-end:   var(--neom-border-hover-end);
    --card-hover-shadow: 0 24px 64px rgba(0, 0, 0, 0.85), 0 0 28px var(--neom-glow);
}

html.light {
    --bg-deep: #ffffff;
    --bg-surface: #fafafa;
    --text: #000000;
    --text-muted: #555555;
    --accent: #000000;
    --accent-rgb: 0, 0, 0;
    --accent-secondary: #555555;
    --accent-secondary-rgb: 85, 85, 85;
    --accent-dim: rgba(0, 0, 0, 0.08);
    
    --glass-bg: #ffffff;
    --glass-border: rgba(0, 0, 0, 0.1);
    --glass-highlight: rgba(0, 0, 0, 0.02);
    --glass-blur: 0px;
    --glass-shadow: 0 24px 64px rgba(0, 0, 0, 0.05);
    --glass: var(--glass-bg);
    
    --border-gradient-start: rgba(0, 0, 0, 0.15);
    --border-gradient-end: rgba(0, 0, 0, 0.01);
    --border-gradient-hover-start: rgba(0, 0, 0, 0.35);
    --border-gradient-hover-end: rgba(0, 0, 0, 0.04);

    --gradient-default: #000000;
    --gradient-label: #000000;

    /* NEOM blue — slightly more transparent on light backgrounds */
    --neom-border-start: rgba(0, 120, 220, 0.55);
    --neom-border-mid:   rgba(0, 80,  200, 0.35);
    --neom-border-end:   rgba(0, 50,  160, 0.12);
    --neom-border-hover-start: rgba(0, 160, 255, 0.80);
    --neom-border-hover-mid:   rgba(0, 100, 240, 0.60);
    --neom-border-hover-end:   rgba(0, 60,  180, 0.25);
    --neom-glow: rgba(0, 100, 220, 0.18);
    --neom-glow-strong: rgba(0, 150, 255, 0.28);

    /* Solid border tokens — light mode (NEOM blue at lower opacity) */
    --border:       rgba(0, 90, 210, 0.22);
    --border-hover: rgba(0, 120, 240, 0.50);

    /* ── Neon Silver icon border palette — light mode ── */
    --icon-border-start: rgba(0, 0, 0, 0.70);
    --icon-border-mid:   rgba(60, 65, 90, 0.50);
    --icon-border-end:   rgba(100, 110, 140, 0.25);
    --icon-border-hover-start: rgba(0, 0, 0, 0.90);
    --icon-border-hover-mid:   rgba(40, 50, 80, 0.72);
    --icon-border-hover-end:   rgba(80, 95, 130, 0.42);

    /* Premium card styles — borders wired to NEOM blue */
    --card-bg-start: #ffffff;
    --card-bg-end: #f4f6fb;
    --card-border-start: var(--neom-border-start);
    --card-border-mid:   var(--neom-border-mid);
    --card-border-end:   var(--neom-border-end);
    --card-shadow: 0 16px 36px rgba(0, 0, 0, 0.06);
    
    --card-hover-bg-start: #ffffff;
    --card-hover-bg-end: #eaf0ff;
    --card-hover-border-start: var(--neom-border-hover-start);
    --card-hover-border-mid:   var(--neom-border-hover-mid);
    --card-hover-border-end:   var(--neom-border-hover-end);
    --card-hover-shadow: 0 24px 48px rgba(0, 0, 0, 0.09), 0 0 18px var(--neom-glow);
}