:root {
    /* Layout & typography — shared across themes */
    --max-content-width: 1200px;
    --sidebar-width: min(280px, 100%);
    --header-height: 4.25rem;

    --font-sans: "DM Sans", system-ui, sans-serif;
    --font-display: "Space Grotesk", system-ui, sans-serif;
    --font-serif: "IBM Plex Serif", Georgia, serif;
    --font-size-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    --line-height: 1.72;
    --prose-width: 68ch;

    --space-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);
    --space-sm: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
    --space-md: clamp(1rem, 0.85rem + 0.75vw, 1.375rem);
    --space-lg: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
    --space-xl: clamp(2rem, 1.5rem + 2vw, 3.5rem);

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 999px;
}

/* ── Light theme (default) ── */
:root,
[data-theme="light"] {
    color-scheme: light;

    --bg-body: #eef1f8;
    --bg-mesh:
        radial-gradient(ellipse 80% 50% at 10% -10%, rgba(0, 168, 120, 0.12) 0%, transparent 55%),
        radial-gradient(ellipse 60% 45% at 95% 5%, rgba(124, 92, 255, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse 50% 40% at 50% 100%, rgba(255, 107, 53, 0.07) 0%, transparent 55%),
        radial-gradient(ellipse 100% 80% at 50% -30%, rgba(180, 200, 230, 0.5) 0%, transparent 60%);

    --bg-surface: rgba(255, 255, 255, 0.82);
    --bg-surface-solid: #ffffff;
    --bg-surface-raised: rgba(255, 255, 255, 0.95);
    --bg-glass: rgba(255, 255, 255, 0.6);
    --bg-header: rgba(238, 241, 248, 0.88);
    --bg-footer: rgba(230, 234, 244, 0.95);

    --clr-body: #3d4663;
    --clr-muted: #6b7590;
    --clr-heading: #12182a;
    --clr-h2: #1e2840;

    --accent-mpe: #e55a2b;
    --accent-mpe-soft: rgba(229, 90, 43, 0.12);
    --accent-midi: #00a878;
    --accent-midi-soft: rgba(0, 168, 120, 0.12);
    --accent-midi2: #7c5cff;
    --accent-midi2-soft: rgba(124, 92, 255, 0.12);
    --accent-cyan: #0891b2;

    --accent: var(--accent-midi);
    --accent-hover: #007a56;
    --accent-muted: var(--accent-midi-soft);

    --pathway-mpe-label: #c2410c;
    --pathway-tech-label: #007a56;

    --gradient-brand: linear-gradient(135deg, var(--accent-mpe) 0%, var(--accent-midi2) 50%, var(--accent-midi) 100%);
    --gradient-card-mpe: linear-gradient(145deg, rgba(255, 107, 53, 0.14) 0%, rgba(255, 255, 255, 0.7) 100%);
    --gradient-card-tech: linear-gradient(145deg, rgba(0, 168, 120, 0.12) 0%, rgba(124, 92, 255, 0.08) 100%);
    --gradient-border: linear-gradient(135deg, rgba(0, 168, 120, 0.45), rgba(124, 92, 255, 0.35), rgba(229, 90, 43, 0.3));
    --gradient-text: linear-gradient(120deg, #12182a 0%, var(--accent-midi) 40%, var(--accent-midi2) 100%);

    --border: rgba(18, 24, 40, 0.08);
    --border-strong: rgba(18, 24, 40, 0.14);

    --bg-nav-link-hover: rgba(18, 24, 40, 0.05);
    --bg-nav-link-active: rgba(0, 168, 120, 0.1);
    --clr-nav: #4a5572;
    --clr-nav-active: var(--accent-midi);

    --bg-toplink-parent: rgba(229, 90, 43, 0.1);
    --bg-toplink-sibling: rgba(18, 24, 40, 0.03);
    --bg-toplink-child: rgba(18, 24, 40, 0.04);
    --bg-toplink-selected: rgba(0, 168, 120, 0.1);
    --clr-toplink: var(--clr-body);

    --theme-toggle-bg: rgba(18, 24, 40, 0.05);
    --theme-toggle-border: rgba(18, 24, 40, 0.1);
    --logo-glow: rgba(0, 168, 120, 0.25);

    --shadow-sm: 0 2px 8px rgba(18, 24, 40, 0.06);
    --shadow-md: 0 8px 28px rgba(18, 24, 40, 0.08);
    --shadow-glow-mpe: 0 8px 28px rgba(229, 90, 43, 0.12);
    --shadow-glow-tech: 0 8px 28px rgba(0, 168, 120, 0.1);
    --shadow-glow-midi2: 0 8px 28px rgba(124, 92, 255, 0.1);

    --meta-theme-color: #eef1f8;
}

/* ── Dark theme ── */
[data-theme="dark"] {
    color-scheme: dark;

    --bg-body: #070b14;
    --bg-mesh:
        radial-gradient(ellipse 80% 50% at 10% -10%, rgba(0, 229, 160, 0.14) 0%, transparent 55%),
        radial-gradient(ellipse 60% 45% at 90% 0%, rgba(167, 139, 250, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse 50% 40% at 50% 100%, rgba(255, 107, 53, 0.08) 0%, transparent 55%),
        radial-gradient(ellipse 100% 80% at 50% -30%, rgba(30, 45, 80, 0.6) 0%, transparent 60%);

    --bg-surface: rgba(18, 24, 40, 0.72);
    --bg-surface-solid: #141c2e;
    --bg-surface-raised: rgba(28, 36, 58, 0.85);
    --bg-glass: rgba(255, 255, 255, 0.04);
    --bg-header: rgba(7, 11, 20, 0.82);
    --bg-footer: rgba(7, 11, 20, 0.95);

    --clr-body: #d4dae8;
    --clr-muted: #8b95ad;
    --clr-heading: #f4f6fb;
    --clr-h2: #e8ecf8;

    --accent-mpe: #ff6b35;
    --accent-mpe-soft: rgba(255, 107, 53, 0.18);
    --accent-midi: #00e5a0;
    --accent-midi-soft: rgba(0, 229, 160, 0.15);
    --accent-midi2: #a78bfa;
    --accent-midi2-soft: rgba(167, 139, 250, 0.15);
    --accent-cyan: #22d3ee;

    --accent: var(--accent-midi);
    --accent-hover: #5fffc8;
    --accent-muted: var(--accent-midi-soft);

    --pathway-mpe-label: #ffb899;
    --pathway-tech-label: #7dffd4;

    --gradient-brand: linear-gradient(135deg, var(--accent-mpe) 0%, var(--accent-midi2) 50%, var(--accent-midi) 100%);
    --gradient-card-mpe: linear-gradient(145deg, rgba(255, 107, 53, 0.22) 0%, rgba(255, 107, 53, 0.04) 100%);
    --gradient-card-tech: linear-gradient(145deg, rgba(0, 229, 160, 0.2) 0%, rgba(167, 139, 250, 0.12) 100%);
    --gradient-border: linear-gradient(135deg, rgba(0, 229, 160, 0.5), rgba(167, 139, 250, 0.4), rgba(255, 107, 53, 0.35));
    --gradient-text: linear-gradient(120deg, #fff 0%, var(--accent-midi) 45%, var(--accent-midi2) 100%);

    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.14);

    --bg-nav-link-hover: rgba(255, 255, 255, 0.06);
    --bg-nav-link-active: rgba(0, 229, 160, 0.12);
    --clr-nav: #b8c0d4;
    --clr-nav-active: var(--accent-midi);

    --bg-toplink-parent: rgba(255, 107, 53, 0.12);
    --bg-toplink-sibling: rgba(255, 255, 255, 0.03);
    --bg-toplink-child: rgba(255, 255, 255, 0.04);
    --bg-toplink-selected: rgba(0, 229, 160, 0.12);
    --clr-toplink: var(--clr-body);

    --theme-toggle-bg: rgba(255, 255, 255, 0.06);
    --theme-toggle-border: rgba(255, 255, 255, 0.12);
    --logo-glow: rgba(0, 229, 160, 0.35);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.35);
    --shadow-glow-mpe: 0 8px 32px rgba(255, 107, 53, 0.15);
    --shadow-glow-tech: 0 8px 32px rgba(0, 229, 160, 0.12);
    --shadow-glow-midi2: 0 8px 32px rgba(167, 139, 250, 0.15);

    --meta-theme-color: #070b14;
}