:root {
    /* ── Z-INDEX LAYERS ── */
    --z-base: 1;
    --z-node: 10;
    --z-fab: 20;
    --z-panel: 50;
    --z-guide: 100;
    --z-tooltip: 150;
    --z-topbar: 200;
    --z-appearance: 500;
    --z-walkthrough: 9000;
    --z-modal: 9999;
    --z-loader: 99999;

    /* ── BASE PALETTE (7 colors × 2 = 14 theme-able values) ── */
    --primary: #0D5C6B;        /* Darker Midnight Green */
    --primary-mid: #2B7A8A;
    --primary-light: #D0E0E5;
    --primary-lightest: #E8F0F2;
    --rose: #A8516E;            /* China Rose */
    --rose-mid: #BF7A90;
    --rose-light: #F0D8E0;
    --violet: #4A2565;          /* Violet JTC */
    --violet-light: #F0E6F5;
    --gamboge: #9A6C08;         /* Gamboge */
    --gamboge-light: #FDF3E0;
    --green: #4A7A2E;           /* Asparagus */
    --green-light: #E4EED8;
    --ultraviolet: #5F4B8B;     /* Ultra Violet */
    --ultraviolet-light: #EDE8F5;
    --neutral: #5A6070;         /* Neutral gray */
    --neutral-light: #ECEEF2;

    /* ── SURFACES & NEUTRALS ── */
    --charcoal: #1E2030;
    --slate: #3D4355;
    --cream: #ECEEF2;
    --warm-white: #F5F6F8;
    --bg-surface: #FFFFFF;
    --bg-overlay: rgba(0, 0, 0, 0.5);
    --bg-panel: #ECEEF2;
    --topbar-bg: #F8F9FB;

    /* ── BORDERS ── */
    --border-light: #D8DCE2;
    --border-lighter: #ECEEF2;
    --border-medium: #B8BCC8;

    /* ── SHADOWS ── */
    --shadow-xs: rgba(0, 0, 0, 0.04);
    --shadow-sm: rgba(0, 0, 0, 0.06);
    --shadow-md: rgba(0, 0, 0, 0.08);
    --shadow-lg: rgba(0, 0, 0, 0.15);
    --shadow-xl: rgba(0, 0, 0, 0.25);
    --shadow-primary: rgba(13, 92, 107, 0.15);
    --primary-tint-xs: rgba(13, 92, 107, 0.03);
    --primary-tint-sm: rgba(13, 92, 107, 0.05);
    --primary-tint-md: rgba(13, 92, 107, 0.08);
    --primary-tint-lg: rgba(13, 92, 107, 0.15);
    --primary-tint-xl: rgba(13, 92, 107, 0.25);

    /* ── STATUS COLORS ── */
    --color-danger: #DC2626;
    --color-danger-light: #FDE8E8;
    --color-danger-text: #9B1C1C;
    --color-danger-shadow: rgba(220, 38, 38, 0.3);
    --color-warning: #B45309;
    --color-warning-light: #FDF3E0;
    --color-warning-text: #9A6C08;
    --color-warning-border: #F59E0B;
    --color-success: #2E7D52;
    --color-success-light: #E4EED8;
    --color-success-text: #2E7D32;
    --color-success-border: #A5D6A7;
    --white-overlay: rgba(255, 255, 255, 0.08);

    /* ── BADGE COLORS (member/pro) ── */
    --badge-member-bg: #E8F0F2;
    --badge-member-text: #0D5C6B;
    --badge-pro-bg: #F0E6FF;
    --badge-pro-text: #7C3AED;

    /* Text color for use on solid brand-color backgrounds */
    --on-brand: #FFFFFF;
    --on-brand-muted: rgba(255, 255, 255, 0.7);

    /* ── NODE ROLES (aliases into base palette) ── */
    --anchor-color: var(--primary);
    --anchor-light: var(--primary-light);
    --pillar-color: var(--green);
    --pillar-light: var(--green-light);
    --subpoint-color: var(--gamboge);
    --subpoint-light: var(--gamboge-light);
    --subpoint-0-color: var(--gamboge);
    --subpoint-0-light: var(--gamboge-light);
    --subpoint-1-color: var(--rose);
    --subpoint-1-light: var(--rose-light);
    --subpoint-2-color: var(--violet);
    --subpoint-2-light: var(--violet-light);
    --garden-color: var(--neutral);
    --garden-light: var(--neutral-light);
    --support-color: var(--slate);
    --support-light: #F0F1F4;
    --story-color: var(--green);
    --story-light: var(--green-light);
    --data-color: var(--ultraviolet);
    --data-light: var(--ultraviolet-light);
    --counterpoint-color: var(--rose);
    --counterpoint-light: var(--rose-light);
    --transitions-color: var(--gamboge);
    --transitions-light: var(--gamboge-light);
    --steps-color: var(--primary);
    --steps-light: var(--primary-light);

    /* ── NARC ARC STEPS (aliases into base palette) ── */
    --narc-context: var(--primary);
    --narc-context-light: var(--primary-light);
    --narc-pattern: var(--green);
    --narc-pattern-light: var(--green-light);
    --narc-change: var(--gamboge);
    --narc-change-light: var(--gamboge-light);
    --narc-resolution: var(--rose);
    --narc-resolution-light: var(--rose-light);
    --narc-difference: var(--violet);
    --narc-difference-light: var(--violet-light);

    /* ── CANVAS ── */
    --canvas-bg: #F0F2F5;
    --canvas-dot: #D5DAE0;
}

body.dark-mode {
    /* ── BASE PALETTE (dark variants) ── */
    --primary: #6AAAB8;
    --primary-mid: #2B7A8A;
    --primary-light: #0D3840;
    --primary-lightest: #082428;
    --rose: #D08898;
    --rose-mid: #A8516E;
    --rose-light: #3A1828;
    --violet: #A878C0;
    --violet-light: #201040;
    --gamboge: #E8B860;
    --gamboge-light: #3A2800;
    --green: #90C870;
    --green-light: #1A3A10;
    --ultraviolet: #B0A0D0;
    --ultraviolet-light: #201848;
    --neutral: #9098A8;
    --neutral-light: #1E2030;

    /* ── SURFACES & NEUTRALS ── */
    --charcoal: #E8EAF0;
    --slate: #94A0B8;
    --cream: #18181B;
    --warm-white: #0F0F12;
    --bg-surface: #1A1A1F;
    --bg-overlay: rgba(0, 0, 0, 0.7);
    --bg-panel: var(--bg-surface);
    --topbar-bg: #1E1F26;

    /* ── BORDERS ── */
    --border-light: #2D2D35;
    --border-lighter: #232329;
    --border-medium: #3F3F4A;

    /* ── SHADOWS ── */
    --shadow-xs: rgba(0, 0, 0, 0.15);
    --shadow-sm: rgba(0, 0, 0, 0.2);
    --shadow-md: rgba(0, 0, 0, 0.25);
    --shadow-lg: rgba(0, 0, 0, 0.35);
    --shadow-xl: rgba(0, 0, 0, 0.5);
    --shadow-primary: rgba(106, 170, 184, 0.2);
    --primary-tint-xs: rgba(106, 170, 184, 0.04);
    --primary-tint-sm: rgba(106, 170, 184, 0.08);
    --primary-tint-md: rgba(106, 170, 184, 0.12);
    --primary-tint-lg: rgba(106, 170, 184, 0.18);
    --primary-tint-xl: rgba(106, 170, 184, 0.25);

    /* ── STATUS COLORS ── */
    --color-danger: #EF4444;
    --color-danger-light: #450A0A;
    --color-danger-text: #FCA5A5;
    --color-danger-shadow: rgba(239, 68, 68, 0.3);
    --color-warning: #F59E0B;
    --color-warning-light: #422006;
    --color-warning-text: #FDE68A;
    --color-warning-border: #B45309;
    --color-success: #81C784;
    --color-success-light: #1A3A10;
    --color-success-text: #81C784;
    --color-success-border: #2E7D32;
    --white-overlay: rgba(255, 255, 255, 0.06);

    /* ── BADGE COLORS (member/pro) ── */
    --badge-member-bg: rgba(106, 170, 184, 0.12);
    --badge-member-text: #6AAAB8;
    --badge-pro-bg: rgba(124, 58, 237, 0.15);
    --badge-pro-text: #C4B5FD;

    /* Text color for use on solid brand-color backgrounds */
    --on-brand: #1E2030;
    --on-brand-muted: rgba(30, 32, 48, 0.6);

    /* ── NODE ROLE ALIASES (re-declared so var() resolves in dark scope) ── */
    --anchor-color: var(--primary);
    --anchor-light: var(--primary-light);
    --pillar-color: var(--green);
    --pillar-light: var(--green-light);
    --subpoint-color: var(--gamboge);
    --subpoint-light: var(--gamboge-light);
    --subpoint-0-color: var(--gamboge);
    --subpoint-0-light: var(--gamboge-light);
    --subpoint-1-color: var(--rose);
    --subpoint-1-light: var(--rose-light);
    --subpoint-2-color: var(--violet);
    --subpoint-2-light: var(--violet-light);
    --garden-color: var(--neutral);
    --garden-light: var(--neutral-light);
    --support-color: #8890A8;
    --support-light: #1E2030;
    --story-color: var(--green);
    --story-light: var(--green-light);
    --data-color: var(--ultraviolet);
    --data-light: var(--ultraviolet-light);
    --counterpoint-color: var(--rose);
    --counterpoint-light: var(--rose-light);
    --transitions-color: var(--gamboge);
    --transitions-light: var(--gamboge-light);
    --steps-color: var(--primary);
    --steps-light: var(--primary-light);

    /* ── NARC ARC STEPS ── */
    --narc-context: var(--primary);
    --narc-context-light: var(--primary-light);
    --narc-pattern: var(--green);
    --narc-pattern-light: var(--green-light);
    --narc-change: var(--gamboge);
    --narc-change-light: var(--gamboge-light);
    --narc-resolution: var(--rose);
    --narc-resolution-light: var(--rose-light);
    --narc-difference: var(--violet);
    --narc-difference-light: var(--violet-light);

    /* ── CANVAS ── */
    --canvas-bg: #141418;
    --canvas-dot: #2A2A30;
}

/* ── GLOBAL FOCUS-VISIBLE ── */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
/* Suppress focus ring on mouse clicks for buttons that already have visual feedback */
button:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible) {
    outline: none;
}

/* Prevent white flash on load when OS prefers dark mode */
@media (prefers-color-scheme: dark) {
    .app-loader {
        background: #1A1A1F;
        color: #94A0B8;
    }
}