:root {
    /* ============================================================
       MIDNIGHT THEME — GitHub Dark navy palette
       Matches the EricBuild app's midnight-mode.css exactly
       ============================================================ */

    /* Backgrounds */
    --color-bg:           #0D1117;   /* GitHub dark canvas */
    --color-bg-elevated:  #161B22;   /* GitHub dark surface */
    --color-bg-card:      #161B22;
    --color-bg-card-hover:#1C2129;
    --color-surface:      #21262D;   /* GitHub dark header */
    --color-surface-2:    #2A3038;
    --color-border:       #21262D;   /* GitHub dark border muted */
    --color-border-bright:#30363D;   /* GitHub dark border default */

    /* Text — GitHub Dark palette */
    --color-text:         #C9D1D9;   /* GitHub dark default text */
    --color-text-muted:   #8B949E;   /* GitHub dark muted */
    --color-text-dim:     #484F58;
    --color-text-bright:  #F0F6FC;   /* GitHub dark heading */

    /* Primary accent — GitHub dark link blue */
    --color-primary:        #58A6FF;
    --color-primary-hover:  #79C0FF;
    --color-primary-dim:    rgba(88, 166, 255, 0.12);
    --color-primary-glow:   rgba(88, 166, 255, 0.35);

    /* Secondary accent — cyan (terminal cyan from midnight) */
    --color-accent:         #39C5CF;
    --color-accent-dim:     rgba(57, 197, 207, 0.12);
    --color-accent-glow:    rgba(57, 197, 207, 0.3);

    /* Semantic */
    --color-success:        #3FB950;   /* GitHub dark success */
    --color-success-dim:    rgba(63, 185, 80, 0.12);
    --color-warning:        #D29922;   /* GitHub dark attention */
    --color-warning-dim:    rgba(210, 153, 34, 0.12);
    --color-danger:         #F85149;   /* GitHub dark danger */
    --color-danger-dim:     rgba(248, 81, 73, 0.12);
    --color-purple:         #BC8CFF;   /* midnight magenta */
    --color-purple-dim:     rgba(188, 140, 255, 0.12);
    --color-pink:           #FF7B72;

    /* Gradients — blue-to-cyan matching the logo */
    --gradient-primary:     linear-gradient(135deg, #3fbbfe, #567eff);
    --gradient-accent:      linear-gradient(135deg, #39C5CF, #58A6FF);
    --gradient-hero:        radial-gradient(ellipse 80% 60% at 50% -10%, rgba(88,166,255,0.18) 0%, transparent 70%);
    --gradient-card:        linear-gradient(135deg, rgba(88,166,255,0.04), rgba(57,197,207,0.02));
    --gradient-text:        linear-gradient(135deg, #3fbbfe, #567eff);
    --gradient-text-warm:   linear-gradient(135deg, #D29922, #FF7B72);

    /* Spacing */
    --spacing-xs:   0.25rem;
    --spacing-sm:   0.5rem;
    --spacing-md:   1rem;
    --spacing-lg:   1.5rem;
    --spacing-xl:   2rem;
    --spacing-2xl:  3rem;
    --spacing-3xl:  5rem;
    --spacing-4xl:  7rem;

    /* Typography — same fonts as the app */
    --font-family:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono:    'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;

    --font-size-xs:   0.75rem;
    --font-size-sm:   0.875rem;
    --font-size-base: 1rem;
    --font-size-lg:   1.125rem;
    --font-size-xl:   1.25rem;
    --font-size-2xl:  1.5rem;
    --font-size-3xl:  2rem;
    --font-size-4xl:  2.75rem;
    --font-size-5xl:  3.75rem;
    --font-size-6xl:  5rem;
    --font-size-7xl:  6.5rem;

    /* Border radius */
    --radius-sm:   0.25rem;
    --radius-md:   0.5rem;
    --radius-lg:   0.875rem;
    --radius-xl:   1.25rem;
    --radius-2xl:  1.75rem;
    --radius-full: 9999px;

    /* Shadows — deeper on navy bg */
    --shadow-sm:        0 1px 3px rgba(0,0,0,0.4);
    --shadow-md:        0 4px 12px rgba(0,0,0,0.5);
    --shadow-lg:        0 12px 32px rgba(0,0,0,0.6);
    --shadow-xl:        0 24px 64px rgba(0,0,0,0.7);
    --shadow-glow:      0 0 30px rgba(88,166,255,0.25), 0 0 60px rgba(88,166,255,0.1);
    --shadow-glow-cyan: 0 0 30px rgba(57,197,207,0.25), 0 0 60px rgba(57,197,207,0.08);
    --shadow-card:      0 0 0 1px rgba(255,255,255,0.04), 0 8px 32px rgba(0,0,0,0.5);

    /* Transitions */
    --transition-fast:   0.12s ease;
    --transition-base:   0.2s ease;
    --transition-slow:   0.35s ease;
    --transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Layout */
    --max-width:      1280px;
    --header-height:  4rem;
    --section-gap:    7rem;
}