:root {
    /* Base Colors - Zinc Scale */
    --bg-color: #f4f4f5;
    /* Zinc-100 */
    --surface-color: #ffffff;
    --grid-color: #d6d9df;
    /* Zinc-200 */
    --text-primary: #18181b;
    /* Zinc-900 */
    --text-secondary: #71717a;
    /* Zinc-500 */

    /* Legacy Mappings (keeping for compatibility) */
    --header-bg: rgba(255, 255, 255, 0.92);
    /* Glassmorphism base */
    --text-color: var(--text-primary);
    --note-bg: #ffffff;

    /* Accent Colors - Indigo/Violet */
    --accent-color: #6366f1;
    /* Indigo-500 */
    --accent-hover: #4f46e5;
    /* Indigo-600 */
    --accent-subtle: #e0e7ff;
    /* Indigo-100 */
    --accent-rgb: 99, 102, 241;

    /* Layout & Typography Scales */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 48px;

    --text-xs: 0.72rem;
    --text-sm: 0.82rem;
    --text-base: 0.92rem;
    --text-md: 1rem;
    --text-lg: 1.15rem;
    --text-xl: 1.35rem;
    --text-2xl: 1.6rem;

    /* UI Surfaces */
    --border-color: rgba(24, 24, 27, 0.12);
    --border-color-hover: rgba(24, 24, 27, 0.18);
    --border-color-strong: rgba(24, 24, 27, 0.28);
    --surface-1: rgba(24, 24, 27, 0.03);
    --surface-2: rgba(24, 24, 27, 0.06);
    --surface-3: rgba(24, 24, 27, 0.1);
    --focus-ring: 0 0 0 2px rgba(var(--accent-rgb), 0.22);
    --hover-bg: rgba(255, 255, 255, 0.55);
    --btn-hover: rgba(255, 255, 255, 0.55);

    /* Shadows & Effects */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow: var(--shadow-lg);
    /* Legacy mapping */

    --backdrop-blur: blur(20px);

    /* Dimensions */
    --header-height: 48px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 9999px;

    /* Code & Ink */
    --ink-color: #18181b;
    --code-bg: #fafafa;
    --code-text: #27272a;
    --code-line-num: #a1a1aa;
    --code-line-bg: #f4f4f5;
    --kw-color: #7c3aed;
    --str-color: #db2777;
    --def-color: #2563eb;
    --comment-color: #059669;
    --sb-track: transparent;
    --sb-thumb: #d4d4d8;
    --sb-thumb-hover: #a1a1aa;
    --on-accent-color: #ffffff;

    /* Layering Contract */
    --z-canvas: 1;
    --z-bottom-toolbar: 21840;
    --z-layer-panel: 21845;
    --z-options: 21900;
    --z-header: 22200;
    --z-dock: 22100;
    --z-dropdown: 23000;
    --z-context-menu: 24000;
    --z-text-toolbar: 24100;
    --z-modal-overlay: 30000;
    --z-project-io: 31500;
    --z-cloud-menu: 26000;
    --z-cloud-modal: 31000;
    --z-toast: 32000;
    --z-app-dialog: 33000;
    --z-loading-overlay: 34000;
    --z-onboarding: 36000;
    --z-drop-overlay: 40000;

    /* Motion */
    --ui-motion-fast: 0.12s;
    --ui-motion-medium: 0.2s;
    --ui-motion-slow: 0.3s;
}

body.dark-mode,
html.dark-mode {
    --bg-color: #121212;
    --surface-color: #1e1e1e;
    /* Matches original note-bg */
    --grid-color: #2c2c2c;
    --text-primary: #e0e0e0;
    --text-secondary: #a0a0a0;
    /* Derived for new variable */

    --header-bg: rgba(24, 24, 24, 0.92);
    /* Slightly transparent adaptation of #181818 */
    --text-color: var(--text-primary);
    --note-bg: #1e1e1e;

    --accent-color: #4da6ff;
    /* Original accent */
    --accent-hover: #007acc;
    /* Original hover */
    --accent-subtle: #1e3a8a;
    /* Derived for new variable */
    --accent-rgb: 77, 166, 255;

    --border-color: rgba(255, 255, 255, 0.1);
    --border-color-hover: rgba(255, 255, 255, 0.18);
    --border-color-strong: rgba(255, 255, 255, 0.28);
    --surface-1: rgba(255, 255, 255, 0.04);
    --surface-2: rgba(255, 255, 255, 0.07);
    --surface-3: rgba(255, 255, 255, 0.12);
    --focus-ring: 0 0 0 2px rgba(var(--accent-rgb), 0.24);
    --hover-bg: var(--surface-2);
    --btn-hover: var(--surface-2);

    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.5);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5);

    --ink-color: #eeeeee;
    --code-bg: #181818;
    --code-text: #d4d4d4;
    --code-line-num: #454545;
    --code-line-bg: #1f1f1f;
    --kw-color: #569cd6;
    --str-color: #ce9178;
    --def-color: #9cdcfe;
    --comment-color: #6a9955;
    --sb-track: transparent;
    --sb-thumb: #424242;
    --sb-thumb-hover: #4f4f4f;
    --on-accent-color: #ffffff;
}

body.midnight-mode,
html.midnight-mode {
    --bg-color: #0f172a;
    /* Slate-900 */
    --surface-color: #1e293b;
    /* Slate-800 */
    --grid-color: #2c3c56;
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;

    --header-bg: rgba(15, 23, 42, 0.92);
    --text-color: var(--text-primary);
    --note-bg: #1e293b;

    --accent-color: #38bdf8;
    /* Sky-400 */
    --accent-hover: #0ea5e9;
    --accent-subtle: #0c4a6e;
    --accent-rgb: 56, 189, 248;

    --border-color: rgba(255, 255, 255, 0.11);
    --border-color-hover: rgba(255, 255, 255, 0.18);
    --border-color-strong: rgba(255, 255, 255, 0.26);
    --surface-1: rgba(255, 255, 255, 0.04);
    --surface-2: rgba(255, 255, 255, 0.07);
    --surface-3: rgba(255, 255, 255, 0.12);
    --focus-ring: 0 0 0 2px rgba(var(--accent-rgb), 0.24);
    --hover-bg: var(--surface-2);
    --btn-hover: var(--surface-2);

    --ink-color: #f1f5f9;
    --code-bg: #1e293b;
    --code-text: #e2e8f0;
    --code-line-num: #475569;
    --code-line-bg: #0f172a;
    --kw-color: #7dd3fc;
    --str-color: #fca5a5;
    --def-color: #67e8f9;
    --comment-color: #4ade80;
    --sb-track: transparent;
    --sb-thumb: #334155;
    --sb-thumb-hover: #475569;
    --on-accent-color: #ffffff;
}

body.amoled-mode,
html.amoled-mode {
    --bg-color: #000000;
    --surface-color: #000000;
    /* Pure black for OLED */
    --grid-color: #202020;
    /* Visible but still OLED-safe */
    --text-primary: #ffffff;
    --text-secondary: #888888;

    --header-bg: rgba(0, 0, 0, 0.95);
    --text-color: var(--text-primary);
    --note-bg: #0a0a0a;

    --accent-color: #ffffff;
    /* Stark white accent */
    --accent-hover: #cccccc;
    --accent-subtle: #222222;
    --accent-rgb: 255, 255, 255;

    --border-color: rgba(255, 255, 255, 0.14);
    --border-color-hover: rgba(255, 255, 255, 0.22);
    --border-color-strong: rgba(255, 255, 255, 0.32);
    --surface-1: rgba(255, 255, 255, 0.05);
    --surface-2: rgba(255, 255, 255, 0.08);
    --surface-3: rgba(255, 255, 255, 0.14);
    --focus-ring: 0 0 0 2px rgba(var(--accent-rgb), 0.28);
    --hover-bg: var(--surface-2);
    --btn-hover: var(--surface-2);

    --ink-color: #ffffff;
    --code-bg: #0a0a0a;
    --code-text: #e5e5e5;
    --code-line-num: #444444;
    --code-line-bg: #000000;
    --kw-color: #569cd6;
    --str-color: #ce9178;
    --def-color: #9cdcfe;
    --comment-color: #6a9955;
    --sb-track: #000000;
    --sb-thumb: #333333;
    --sb-thumb-hover: #555555;
    --on-accent-color: #000000;
}

body.high-contrast-mode,
html.high-contrast-mode {
    --bg-color: #000000;
    --surface-color: #000000;
    --grid-color: transparent;
    /* High visibility grid */
    --text-primary: #ffffff;
    --text-secondary: #ffff00;
    /* Yellow for secondary */

    --header-bg: #000000;
    /* No transparency */
    --text-color: #ffffff;
    --note-bg: #000000;

    --accent-color: #00ffff;
    /* Cyan accent */
    --accent-hover: #00cccc;
    --accent-subtle: #004444;
    --accent-rgb: 0, 255, 255;

    --border-color: rgba(255, 255, 255, 0.4);
    --border-color-hover: rgba(255, 255, 255, 0.55);
    --border-color-strong: rgba(255, 255, 255, 0.72);
    --surface-1: rgba(255, 255, 255, 0.08);
    --surface-2: rgba(255, 255, 255, 0.14);
    --surface-3: rgba(0, 255, 255, 0.16);
    --focus-ring: 0 0 0 2px rgba(var(--accent-rgb), 0.36);
    --hover-bg: var(--surface-2);
    --btn-hover: var(--surface-2);

    --ink-color: #ffffff;
    --code-bg: #000000;
    --code-text: #ffffff;
    --code-line-num: #ffffff;
    --code-line-bg: #000000;
    --kw-color: #00ff00;
    --str-color: #ff00ff;
    --def-color: #00ffff;
    --comment-color: #ffff00;
    --sb-track: #000000;
    --sb-thumb: #ffffff;
    --sb-thumb-hover: #cccccc;
    --on-accent-color: #000000;
}

body.sepia-mode,
html.sepia-mode {
    --bg-color: #f4ecd8;
    --surface-color: #fdf6e3;
    --grid-color: #d6c9b1;
    --text-primary: #433422;
    --text-secondary: #8b7964;

    --header-bg: rgba(244, 236, 216, 0.92);
    --text-color: var(--text-primary);
    --note-bg: #fdf6e3;

    --accent-color: #d37a42;
    /* Warm orange/brown */
    --accent-hover: #b56230;
    --accent-subtle: #f0e6d2;
    --accent-rgb: 211, 122, 66;
    --accent-gradient-mid: #cf3a15;
    /* Red/Orange for button gradient */

    --border-color: rgba(94, 62, 33, 0.16);
    --border-color-hover: rgba(94, 62, 33, 0.24);
    --border-color-strong: rgba(94, 62, 33, 0.34);
    --surface-1: rgba(94, 62, 33, 0.04);
    --surface-2: rgba(94, 62, 33, 0.08);
    --surface-3: rgba(94, 62, 33, 0.14);
    --focus-ring: 0 0 0 2px rgba(var(--accent-rgb), 0.22);
    --hover-bg: rgba(255, 255, 255, 0.35);
    --btn-hover: rgba(255, 255, 255, 0.35);

    --ink-color: #433422;
    --code-bg: #fdf6e3;
    --code-text: #433422;
    --code-line-num: #aa9988;
    --code-line-bg: #f4ecd8;
    --kw-color: #b58900;
    --str-color: #2aa198;
    --def-color: #268bd2;
    --comment-color: #859900;
    --sb-track: transparent;
    --sb-thumb: #d3cbb8;
    --sb-thumb-hover: #b0a690;
}

body.neon-mode,
html.neon-mode {
    --bg-color: #0b0014;
    /* Deep purple/black */
    --surface-color: #1a0b2e;
    --grid-color: #3e2669;
    --text-primary: #00ffde;
    /* Cyan text */
    --text-secondary: #b16bea;
    /* Purple text */

    --header-bg: rgba(11, 0, 20, 0.92);
    --text-color: var(--text-primary);
    --note-bg: #1a0b2e;

    --accent-color: #ff00ff;
    /* Magenta Neon */
    --accent-hover: #d900d9;
    --accent-subtle: #3a003a;
    --accent-rgb: 255, 0, 255;

    --border-color: rgba(255, 0, 255, 0.2);
    --border-color-hover: rgba(255, 0, 255, 0.32);
    --border-color-strong: rgba(255, 0, 255, 0.46);
    --surface-1: rgba(255, 255, 255, 0.04);
    --surface-2: rgba(255, 255, 255, 0.08);
    --surface-3: rgba(255, 0, 255, 0.14);
    --focus-ring: 0 0 0 2px rgba(var(--accent-rgb), 0.24);
    --hover-bg: var(--surface-2);
    --btn-hover: var(--surface-2);

    --ink-color: #00ffde;
    --code-bg: #10051d;
    --code-text: #f0f0f0;
    --code-line-num: #5c3b88;
    --code-line-bg: #0b0014;
    --kw-color: #ff00ff;
    --str-color: #00ffde;
    --def-color: #fcee0a;
    /* Yellow */
    --comment-color: #6a9955;
    /* Keep green for comments */
    --sb-track: #0b0014;
    --sb-thumb: #b16bea;
    --sb-thumb-hover: #ff00ff;
}

body.blush-mode,
html.blush-mode {
    --bg-color: #EEABC4;
    --surface-color: #F8D0E2;
    --grid-color: #D9A0B8;
    --text-primary: #861388;
    --text-secondary: #A64A8C;

    --header-bg: rgba(238, 171, 196, 0.92);
    --text-color: var(--text-primary);
    --note-bg: #F8D0E2;

    --accent-color: #E15A97;
    --accent-hover: #C94882;
    --accent-subtle: #F8E2ED;
    --accent-rgb: 225, 90, 151;

    --border-color: rgba(134, 19, 136, 0.14);
    --border-color-hover: rgba(134, 19, 136, 0.22);
    --border-color-strong: rgba(134, 19, 136, 0.32);
    --surface-1: rgba(134, 19, 136, 0.04);
    --surface-2: rgba(134, 19, 136, 0.08);
    --surface-3: rgba(134, 19, 136, 0.14);
    --focus-ring: 0 0 0 2px rgba(var(--accent-rgb), 0.22);
    --hover-bg: rgba(255, 255, 255, 0.30);
    --btn-hover: rgba(255, 255, 255, 0.30);

    --ink-color: #861388;
    --code-bg: #F8D0E2;
    --code-text: #861388;
    --code-line-num: #C799A6;
    --code-line-bg: #EEABC4;
    --kw-color: #E15A97;
    --str-color: #2E7D32;
    --def-color: #1565C0;
    --comment-color: #A67B90;
    --sb-track: transparent;
    --sb-thumb: #C799A6;
    --sb-thumb-hover: #B08494;
    --on-accent-color: #ffffff;
}

body.mint-mode,
html.mint-mode {
    --bg-color: #DEF4C6;
    --surface-color: #EEFADE;
    --grid-color: #B8D8A0;
    --text-primary: #1B512D;
    --text-secondary: #4A7B5C;

    --header-bg: rgba(222, 244, 198, 0.92);
    --text-color: var(--text-primary);
    --note-bg: #EEFADE;

    --accent-color: #1C7C54;
    --accent-hover: #166544;
    --accent-subtle: #D4EDE0;
    --accent-rgb: 28, 124, 84;

    --border-color: rgba(27, 81, 45, 0.14);
    --border-color-hover: rgba(27, 81, 45, 0.22);
    --border-color-strong: rgba(27, 81, 45, 0.32);
    --surface-1: rgba(27, 81, 45, 0.04);
    --surface-2: rgba(27, 81, 45, 0.08);
    --surface-3: rgba(27, 81, 45, 0.14);
    --focus-ring: 0 0 0 2px rgba(var(--accent-rgb), 0.22);
    --hover-bg: rgba(255, 255, 255, 0.30);
    --btn-hover: rgba(255, 255, 255, 0.30);

    --ink-color: #1B512D;
    --code-bg: #EEFADE;
    --code-text: #1B512D;
    --code-line-num: #73A688;
    --code-line-bg: #DEF4C6;
    --kw-color: #1C7C54;
    --str-color: #A71D31;
    --def-color: #1565C0;
    --comment-color: #6B8B6E;
    --sb-track: transparent;
    --sb-thumb: #73E2A7;
    --sb-thumb-hover: #5CC98E;
    --on-accent-color: #ffffff;
}