/* ==========================================================================
   MEDISpa — Theme tokens
   The single source of colour for both the admin chrome and the login page.
   The picker sets data-nav-theme on <html>; everything else reads these vars.

   Each theme supplies the same seven tokens:
     --nav-1 / --nav-2          surface, light → dark (rail, hero gradients)
     --nav-1-rgb / --nav-2-rgb  same values as components, for rgba() overlays
     --nav-accent / -2          highlight, light → dark (active states, buttons)
     --nav-accent-rgb           accent components, for tinted washes
   ========================================================================== */

:root,
[data-nav-theme="ocean"] {
    --nav-1: #14547f;
    --nav-2: #0b3557;
    --nav-1-rgb: 20, 84, 127;
    --nav-2-rgb: 11, 53, 87;
    --nav-accent: #2f8fd8;
    --nav-accent-2: #1d6fb0;
    --nav-accent-rgb: 47, 143, 216;
}

[data-nav-theme="midnight"] {
    --nav-1: #1c2434;
    --nav-2: #0f141e;
    --nav-1-rgb: 28, 36, 52;
    --nav-2-rgb: 15, 20, 30;
    --nav-accent: #4f7cf7;
    --nav-accent-2: #3559d6;
    --nav-accent-rgb: 79, 124, 247;
}

[data-nav-theme="indigo"] {
    --nav-1: #23315f;
    --nav-2: #131a35;
    --nav-1-rgb: 35, 49, 95;
    --nav-2-rgb: 19, 26, 53;
    --nav-accent: #5b8def;
    --nav-accent-2: #3a68c9;
    --nav-accent-rgb: 91, 141, 239;
}

[data-nav-theme="teal"] {
    --nav-1: #0e4b54;
    --nav-2: #072d33;
    --nav-1-rgb: 14, 75, 84;
    --nav-2-rgb: 7, 45, 51;
    --nav-accent: #17b8a6;
    --nav-accent-2: #0d8f81;
    --nav-accent-rgb: 23, 184, 166;
}

[data-nav-theme="forest"] {
    --nav-1: #11503f;
    --nav-2: #082f26;
    --nav-1-rgb: 17, 80, 63;
    --nav-2-rgb: 8, 47, 38;
    --nav-accent: #17b892;
    --nav-accent-2: #0d8f72;
    --nav-accent-rgb: 23, 184, 146;
}

[data-nav-theme="moss"] {
    --nav-1: #3a4526;
    --nav-2: #1f2614;
    --nav-1-rgb: 58, 69, 38;
    --nav-2-rgb: 31, 38, 20;
    --nav-accent: #9bbf4e;
    --nav-accent-2: #74963a;
    --nav-accent-rgb: 155, 191, 78;
}

[data-nav-theme="royal"] {
    --nav-1: #2f2569;
    --nav-2: #1a1440;
    --nav-1-rgb: 47, 37, 105;
    --nav-2-rgb: 26, 20, 64;
    --nav-accent: #7c5cf5;
    --nav-accent-2: #5b3fd0;
    --nav-accent-rgb: 124, 92, 245;
}

[data-nav-theme="plum"] {
    --nav-1: #4c2151;
    --nav-2: #2c1130;
    --nav-1-rgb: 76, 33, 81;
    --nav-2-rgb: 44, 17, 48;
    --nav-accent: #c752ae;
    --nav-accent-2: #9e3a89;
    --nav-accent-rgb: 199, 82, 174;
}

[data-nav-theme="rose"] {
    --nav-1: #5a2440;
    --nav-2: #331222;
    --nav-1-rgb: 90, 36, 64;
    --nav-2-rgb: 51, 18, 34;
    --nav-accent: #ec6f9e;
    --nav-accent-2: #c14877;
    --nav-accent-rgb: 236, 111, 158;
}

[data-nav-theme="crimson"] {
    --nav-1: #5c1a24;
    --nav-2: #340c13;
    --nav-1-rgb: 92, 26, 36;
    --nav-2-rgb: 52, 12, 19;
    --nav-accent: #dd4a60;
    --nav-accent-2: #b32f43;
    --nav-accent-rgb: 221, 74, 96;
}

[data-nav-theme="bronze"] {
    --nav-1: #4a3524;
    --nav-2: #2a1d13;
    --nav-1-rgb: 74, 53, 36;
    --nav-2-rgb: 42, 29, 19;
    --nav-accent: #d99a4e;
    --nav-accent-2: #ab7331;
    --nav-accent-rgb: 217, 154, 78;
}

[data-nav-theme="graphite"] {
    --nav-1: #2e333c;
    --nav-2: #191c22;
    --nav-1-rgb: 46, 51, 60;
    --nav-2-rgb: 25, 28, 34;
    --nav-accent: #6d84ab;
    --nav-accent-2: #4e6488;
    --nav-accent-rgb: 109, 132, 171;
}