/* ================================================================
   КЛИЕНТ ЦЕНТР — Theming Engine
   16 professionally designed themes: 8 Light + 8 Dark
   All values map to semantic tokens consumed by design-system.css.

   Semantic token contract (every theme MUST define all of these):
   ─────────────────────────────────────────────────────────────────
   Surface
     --bg            page background
     --bg-soft       subtle offset background (cards, rows)
     --bg-raised     elevated surface (modals, popovers)
     --panel         translucent panel fill
     --panel-strong  opaque panel fill
     --panel-hover   panel hover state

   Borders
     --line          default border
     --line-strong   emphasized border / divider

   Text
     --text          primary body text
     --text-soft     secondary body text
     --muted         placeholder / caption text
     --muted-strong  subdued labels

   Accent palette  (brand identity — preserved across all themes)
     --blue          info / link
     --blue-dim      info background tint
     --blue-glow     info glow
     --gold          warning / loyalty
     --gold-strong   warning hover
     --gold-dim      warning background tint
     --lime          success / primary CTA
     --lime-dark     success hover
     --lime-dim      success background tint
     --red           danger
     --red-dim       danger background tint
     --purple        special / loyalty premium
     --purple-dim    special background tint

   Shadows
     --shadow-sm     small card lift
     --shadow        standard card shadow
     --shadow-lg     large modal shadow
     --shadow-blue   colored glow — info
     --shadow-lime   colored glow — success

   ================================================================ */

/* ================================================================
   ██████╗  █████╗ ██████╗ ██╗  ██╗    ████████╗██╗  ██╗███████╗
   ██╔══██╗██╔══██╗██╔══██╗██║ ██╔╝    ╚══██╔══╝██║  ██║██╔════╝
   ██║  ██║███████║██████╔╝█████╔╝        ██║   ███████║█████╗
   ██║  ██║██╔══██║██╔══██╗██╔═██╗        ██║   ██╔══██║██╔══╝
   ██████╔╝██║  ██║██║  ██║██║  ██╗       ██║   ██║  ██║███████╗
   ╚═════╝ ╚═╝  ╚═╝╚═╝  ╚═╝╚═╝  ╚═╝      ╚═╝   ╚═╝  ╚═╝╚══════╝
   DEFAULT (loaded before any theme is applied — matches original)
   ================================================================ */
:root {
  --bg:             #07111f;
  --bg-soft:        #0c1d31;
  --bg-raised:      #0f2236;
  --panel:          rgba(11, 26, 44, 0.80);
  --panel-strong:   rgba(7, 17, 31, 0.94);
  --panel-hover:    rgba(15, 34, 54, 0.90);

  --line:           rgba(149, 184, 227, 0.14);
  --line-strong:    rgba(149, 184, 227, 0.28);

  --text:           #f4f7fb;
  --text-soft:      #c8d8e8;
  --muted:          #7a9ab8;
  --muted-strong:   #a9b8cb;

  --blue:           #65cfff;
  --blue-dim:       rgba(101, 207, 255, 0.12);
  --blue-glow:      rgba(101, 207, 255, 0.22);
  --gold:           #ffb23f;
  --gold-strong:    #ff8c1a;
  --gold-dim:       rgba(255, 178, 63, 0.12);
  --lime:           #97e85b;
  --lime-dark:      #72c23d;
  --lime-dim:       rgba(151, 232, 91, 0.12);
  --red:            #ff5b5b;
  --red-dim:        rgba(255, 91, 91, 0.12);
  --purple:         #b07eff;
  --purple-dim:     rgba(176, 126, 255, 0.12);

  --shadow-sm:      0 4px 16px rgba(0, 0, 0, 0.30);
  --shadow:         0 12px 48px rgba(0, 0, 0, 0.42);
  --shadow-lg:      0 24px 80px rgba(0, 0, 0, 0.52);
  --shadow-blue:    0 8px 32px rgba(101, 207, 255, 0.18);
  --shadow-lime:    0 8px 32px rgba(151, 232, 91, 0.20);

  /* Layout — not theme-specific but stored here for single import */
  --font-body:    "Inter", "Segoe UI", system-ui, sans-serif;
  --font-display: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-emoji:   "NativeEmoji", "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif;
  --font-mono:    "JetBrains Mono", "Fira Code", monospace;
  --container:    1200px;
  --sidebar-w:    260px;
  --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 22px;
  --r-xl: 28px; --r-2xl: 36px; --r-full: 9999px;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;
  --sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;
  --sp-16:64px;--sp-20:80px;--sp-24:96px;
  --text-xs:.72rem;--text-sm:.85rem;--text-base:1rem;
  --text-md:1.1rem;--text-lg:1.25rem;--text-xl:1.5rem;
  --text-2xl:2rem;--text-3xl:2.6rem;--text-4xl:3.4rem;
  --text-5xl:clamp(2.8rem,6vw,5rem);
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-in:cubic-bezier(.4,0,1,1);
  --ease-out:cubic-bezier(0,0,.2,1);
  --dur-fast:120ms;--dur-base:200ms;--dur-slow:340ms;
}

/* ================================================================
   ██████╗  █████╗ ██████╗ ██╗  ██╗    ████████╗██╗  ██╗███████╗
   ██╔══██╗██╔══██╗██╔══██╗██║ ██╔╝    ╚══██╔══╝██║  ██║██╔════╝
   ██║  ██║███████║██████╔╝█████╔╝        ██║   ███████║█████╗
   ██║  ██║██╔══██║██╔══██╗██╔═██╗        ██║   ██╔══██║██╔══╝
   ██████╔╝██║  ██║██║  ██║██║  ██╗       ██║   ██║  ██║███████╗
   ╚═════╝ ╚═╝  ╚═╝╚═╝  ╚═╝╚═╝  ╚═╝      ╚═╝   ╚═╝  ╚═╝╚══════╝
   ── DARK THEMES ─────────────────────────────────────────────────
   ================================================================ */


/* ────────────────────────────────────────────────────────────────
   D1 · MIDNIGHT SLATE  (default dark — already loaded in :root)
   Deep navy-blue with cyan + lime accents.
   The professional default for long evening work sessions.
   Contrast ratios: body text ≥ 7:1 on --bg
   ──────────────────────────────────────────────────────────────── */
[data-theme="midnight-slate"] {
  --bg:           #07111f;
  --bg-soft:      #0c1d31;
  --bg-raised:    #0f2236;
  --panel:        rgba(11, 26, 44, 0.80);
  --panel-strong: rgba(7, 17, 31, 0.94);
  --panel-hover:  rgba(15, 34, 54, 0.90);

  --line:         rgba(149, 184, 227, 0.14);
  --line-strong:  rgba(149, 184, 227, 0.28);

  --text:         #f4f7fb;
  --text-soft:    #c8d8e8;
  --muted:        #7a9ab8;
  --muted-strong: #a9b8cb;

  --blue:         #65cfff;
  --blue-dim:     rgba(101, 207, 255, 0.12);
  --blue-glow:    rgba(101, 207, 255, 0.22);
  --gold:         #ffb23f;
  --gold-strong:  #ff8c1a;
  --gold-dim:     rgba(255, 178, 63, 0.12);
  --lime:         #97e85b;
  --lime-dark:    #72c23d;
  --lime-dim:     rgba(151, 232, 91, 0.12);
  --red:          #ff5b5b;
  --red-dim:      rgba(255, 91, 91, 0.12);
  --purple:       #b07eff;
  --purple-dim:   rgba(176, 126, 255, 0.12);

  --shadow-sm:    0 4px 16px rgba(0, 0, 0, 0.30);
  --shadow:       0 12px 48px rgba(0, 0, 0, 0.42);
  --shadow-lg:    0 24px 80px rgba(0, 0, 0, 0.52);
  --shadow-blue:  0 8px 32px rgba(101, 207, 255, 0.18);
  --shadow-lime:  0 8px 32px rgba(151, 232, 91, 0.20);
}


/* ────────────────────────────────────────────────────────────────
   D2 · DEEP FOREST
   Dark emerald greens with warm amber. Calming, organic.
   Great for wellness studios and spa businesses.
   ──────────────────────────────────────────────────────────────── */
[data-theme="deep-forest"] {
  --bg:           #080f0a;
  --bg-soft:      #0e1a10;
  --bg-raised:    #132416;
  --panel:        rgba(13, 26, 16, 0.82);
  --panel-strong: rgba(8, 15, 10, 0.96);
  --panel-hover:  rgba(18, 32, 20, 0.90);

  --line:         rgba(120, 180, 130, 0.16);
  --line-strong:  rgba(120, 180, 130, 0.30);

  --text:         #e8f5ea;
  --text-soft:    #b8d4bc;
  --muted:        #6a9470;
  --muted-strong: #98b89e;

  --blue:         #5dd6a8;
  --blue-dim:     rgba(93, 214, 168, 0.12);
  --blue-glow:    rgba(93, 214, 168, 0.20);
  --gold:         #f0b060;
  --gold-strong:  #d4882a;
  --gold-dim:     rgba(240, 176, 96, 0.14);
  --lime:         #7dd95a;
  --lime-dark:    #5ab83a;
  --lime-dim:     rgba(125, 217, 90, 0.14);
  --red:          #e86060;
  --red-dim:      rgba(232, 96, 96, 0.12);
  --purple:       #a070e8;
  --purple-dim:   rgba(160, 112, 232, 0.12);

  --shadow-sm:    0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow:       0 12px 48px rgba(0, 0, 0, 0.50);
  --shadow-lg:    0 24px 80px rgba(0, 0, 0, 0.60);
  --shadow-blue:  0 8px 32px rgba(93, 214, 168, 0.16);
  --shadow-lime:  0 8px 32px rgba(125, 217, 90, 0.18);
}


/* ────────────────────────────────────────────────────────────────
   D3 · OLED PURE BLACK
   True black for OLED screens. Maximum contrast. Battery-saving.
   Designed for mobile-first practitioners.
   ──────────────────────────────────────────────────────────────── */
[data-theme="oled-black"] {
  --bg:           #000000;
  --bg-soft:      #0a0a0a;
  --bg-raised:    #111111;
  --panel:        rgba(10, 10, 10, 0.90);
  --panel-strong: rgba(0, 0, 0, 0.98);
  --panel-hover:  rgba(20, 20, 20, 0.92);

  --line:         rgba(255, 255, 255, 0.08);
  --line-strong:  rgba(255, 255, 255, 0.16);

  --text:         #ffffff;
  --text-soft:    #d0d0d0;
  --muted:        #666666;
  --muted-strong: #999999;

  --blue:         #58c8ff;
  --blue-dim:     rgba(88, 200, 255, 0.10);
  --blue-glow:    rgba(88, 200, 255, 0.18);
  --gold:         #ffb830;
  --gold-strong:  #e09010;
  --gold-dim:     rgba(255, 184, 48, 0.10);
  --lime:         #a0f060;
  --lime-dark:    #78cc38;
  --lime-dim:     rgba(160, 240, 96, 0.10);
  --red:          #ff4444;
  --red-dim:      rgba(255, 68, 68, 0.10);
  --purple:       #cc88ff;
  --purple-dim:   rgba(204, 136, 255, 0.10);

  --shadow-sm:    0 4px 16px rgba(0, 0, 0, 0.80);
  --shadow:       0 12px 48px rgba(0, 0, 0, 0.90);
  --shadow-lg:    0 24px 80px rgba(0, 0, 0, 0.95);
  --shadow-blue:  0 8px 32px rgba(88, 200, 255, 0.15);
  --shadow-lime:  0 8px 32px rgba(160, 240, 96, 0.15);
}


/* ────────────────────────────────────────────────────────────────
   D4 · CYBER INDIGO
   Dark indigo canvas with electric violet + neon pink accents.
   Bold and creative — ideal for fashion studios and nail bars.
   ──────────────────────────────────────────────────────────────── */
[data-theme="cyber-indigo"] {
  --bg:           #0a0714;
  --bg-soft:      #110d1e;
  --bg-raised:    #181228;
  --panel:        rgba(16, 12, 28, 0.82);
  --panel-strong: rgba(10, 7, 20, 0.96);
  --panel-hover:  rgba(22, 16, 36, 0.90);

  --line:         rgba(160, 120, 255, 0.14);
  --line-strong:  rgba(160, 120, 255, 0.28);

  --text:         #f0eeff;
  --text-soft:    #c8b8f0;
  --muted:        #7860b8;
  --muted-strong: #a890d8;

  --blue:         #a060ff;
  --blue-dim:     rgba(160, 96, 255, 0.14);
  --blue-glow:    rgba(160, 96, 255, 0.24);
  --gold:         #ff70d0;
  --gold-strong:  #e040b0;
  --gold-dim:     rgba(255, 112, 208, 0.12);
  --lime:         #60d8ff;
  --lime-dark:    #30b8e0;
  --lime-dim:     rgba(96, 216, 255, 0.12);
  --red:          #ff5080;
  --red-dim:      rgba(255, 80, 128, 0.12);
  --purple:       #d090ff;
  --purple-dim:   rgba(208, 144, 255, 0.12);

  --shadow-sm:    0 4px 16px rgba(0, 0, 0, 0.40);
  --shadow:       0 12px 48px rgba(0, 0, 0, 0.55);
  --shadow-lg:    0 24px 80px rgba(0, 0, 0, 0.65);
  --shadow-blue:  0 8px 32px rgba(160, 96, 255, 0.22);
  --shadow-lime:  0 8px 32px rgba(96, 216, 255, 0.18);
}


/* ────────────────────────────────────────────────────────────────
   D5 · MOCHA DARK
   Warm espresso browns with cream and amber. Rich and cozy.
   Perfect for coffee shops, tattoo parlours, and artisan studios.
   ──────────────────────────────────────────────────────────────── */
[data-theme="mocha-dark"] {
  --bg:           #100c08;
  --bg-soft:      #1a1410;
  --bg-raised:    #231c16;
  --panel:        rgba(26, 20, 16, 0.84);
  --panel-strong: rgba(16, 12, 8, 0.96);
  --panel-hover:  rgba(32, 24, 18, 0.90);

  --line:         rgba(210, 170, 120, 0.14);
  --line-strong:  rgba(210, 170, 120, 0.28);

  --text:         #f5ede4;
  --text-soft:    #d4bfa8;
  --muted:        #8a6e54;
  --muted-strong: #b0917a;

  --blue:         #80c8d8;
  --blue-dim:     rgba(128, 200, 216, 0.12);
  --blue-glow:    rgba(128, 200, 216, 0.20);
  --gold:         #e8a030;
  --gold-strong:  #c07810;
  --gold-dim:     rgba(232, 160, 48, 0.14);
  --lime:         #a8c860;
  --lime-dark:    #80a840;
  --lime-dim:     rgba(168, 200, 96, 0.14);
  --red:          #e86858;
  --red-dim:      rgba(232, 104, 88, 0.12);
  --purple:       #c890c0;
  --purple-dim:   rgba(200, 144, 192, 0.12);

  --shadow-sm:    0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow:       0 12px 48px rgba(0, 0, 0, 0.50);
  --shadow-lg:    0 24px 80px rgba(0, 0, 0, 0.62);
  --shadow-blue:  0 8px 32px rgba(128, 200, 216, 0.16);
  --shadow-lime:  0 8px 32px rgba(168, 200, 96, 0.18);
}


/* ────────────────────────────────────────────────────────────────
   D6 · GRAPHITE COPPER
   Neutral graphite with copper, mint, and cool cyan accents.
   Strict, low-noise, and practical for operational dashboards.
   ──────────────────────────────────────────────────────────────── */
[data-theme="graphite-copper"] {
  --bg:           #0e1114;
  --bg-soft:      #151a1f;
  --bg-raised:    #1d2329;
  --panel:        rgba(21, 26, 31, 0.84);
  --panel-strong: rgba(11, 14, 17, 0.96);
  --panel-hover:  rgba(29, 35, 41, 0.92);

  --line:         rgba(160, 174, 190, 0.14);
  --line-strong:  rgba(160, 174, 190, 0.28);

  --text:         #f3f5f7;
  --text-soft:    #c2ccd6;
  --muted:        #7b8794;
  --muted-strong: #a2adb8;

  --blue:         #62c6d9;
  --blue-dim:     rgba(98, 198, 217, 0.12);
  --blue-glow:    rgba(98, 198, 217, 0.20);
  --gold:         #d9984a;
  --gold-strong:  #b87425;
  --gold-dim:     rgba(217, 152, 74, 0.14);
  --lime:         #7edb8f;
  --lime-dark:    #55b86b;
  --lime-dim:     rgba(126, 219, 143, 0.13);
  --red:          #f06464;
  --red-dim:      rgba(240, 100, 100, 0.12);
  --purple:       #b58cff;
  --purple-dim:   rgba(181, 140, 255, 0.12);

  --shadow-sm:    0 4px 16px rgba(0, 0, 0, 0.34);
  --shadow:       0 12px 48px rgba(0, 0, 0, 0.46);
  --shadow-lg:    0 24px 80px rgba(0, 0, 0, 0.58);
  --shadow-blue:  0 8px 32px rgba(98, 198, 217, 0.16);
  --shadow-lime:  0 8px 32px rgba(126, 219, 143, 0.16);
}


/* ────────────────────────────────────────────────────────────────
   D7 · AUBERGINE NOIR
   Deep plum with mint, peach, and violet accents.
   Rich enough for creative teams without sacrificing readability.
   ──────────────────────────────────────────────────────────────── */
[data-theme="aubergine-noir"] {
  --bg:           #130914;
  --bg-soft:      #1e1021;
  --bg-raised:    #28162d;
  --panel:        rgba(30, 16, 33, 0.84);
  --panel-strong: rgba(19, 9, 20, 0.96);
  --panel-hover:  rgba(40, 22, 45, 0.92);

  --line:         rgba(210, 150, 215, 0.14);
  --line-strong:  rgba(210, 150, 215, 0.28);

  --text:         #fff1fb;
  --text-soft:    #dec4dc;
  --muted:        #9a6e99;
  --muted-strong: #bd96bd;

  --blue:         #67d7e8;
  --blue-dim:     rgba(103, 215, 232, 0.12);
  --blue-glow:    rgba(103, 215, 232, 0.20);
  --gold:         #f2a35e;
  --gold-strong:  #d17936;
  --gold-dim:     rgba(242, 163, 94, 0.14);
  --lime:         #85e7b0;
  --lime-dark:    #5bc98a;
  --lime-dim:     rgba(133, 231, 176, 0.12);
  --red:          #ff5c8a;
  --red-dim:      rgba(255, 92, 138, 0.12);
  --purple:       #c789ff;
  --purple-dim:   rgba(199, 137, 255, 0.12);

  --shadow-sm:    0 4px 16px rgba(0, 0, 0, 0.38);
  --shadow:       0 12px 48px rgba(0, 0, 0, 0.52);
  --shadow-lg:    0 24px 80px rgba(0, 0, 0, 0.64);
  --shadow-blue:  0 8px 32px rgba(103, 215, 232, 0.16);
  --shadow-lime:  0 8px 32px rgba(133, 231, 176, 0.16);
}


/* ────────────────────────────────────────────────────────────────
   D8 · MARINE NIGHT
   Dark marine surface with turquoise, coral, and soft gold.
   Comfortable for service teams that want a fresher dark mode.
   ──────────────────────────────────────────────────────────────── */
[data-theme="marine-night"] {
  --bg:           #061113;
  --bg-soft:      #0b1b1f;
  --bg-raised:    #10262b;
  --panel:        rgba(11, 27, 31, 0.84);
  --panel-strong: rgba(6, 17, 19, 0.96);
  --panel-hover:  rgba(16, 38, 43, 0.92);

  --line:         rgba(110, 205, 212, 0.14);
  --line-strong:  rgba(110, 205, 212, 0.28);

  --text:         #ecfbfc;
  --text-soft:    #b9d6d8;
  --muted:        #679196;
  --muted-strong: #94b8bc;

  --blue:         #54d2d8;
  --blue-dim:     rgba(84, 210, 216, 0.12);
  --blue-glow:    rgba(84, 210, 216, 0.20);
  --gold:         #f6c56b;
  --gold-strong:  #d79a31;
  --gold-dim:     rgba(246, 197, 107, 0.14);
  --lime:         #79df9a;
  --lime-dark:    #4dbc73;
  --lime-dim:     rgba(121, 223, 154, 0.12);
  --red:          #ff6b6b;
  --red-dim:      rgba(255, 107, 107, 0.12);
  --purple:       #9d8cff;
  --purple-dim:   rgba(157, 140, 255, 0.12);

  --shadow-sm:    0 4px 16px rgba(0, 0, 0, 0.36);
  --shadow:       0 12px 48px rgba(0, 0, 0, 0.50);
  --shadow-lg:    0 24px 80px rgba(0, 0, 0, 0.62);
  --shadow-blue:  0 8px 32px rgba(84, 210, 216, 0.16);
  --shadow-lime:  0 8px 32px rgba(121, 223, 154, 0.16);
}


/* ================================================================
   ██╗     ██╗ ██████╗ ██╗  ██╗████████╗    ████████╗██╗  ██╗███████╗
   ██║     ██║██╔════╝ ██║  ██║╚══██╔══╝    ╚══██╔══╝██║  ██║██╔════╝
   ██║     ██║██║  ███╗███████║   ██║           ██║   ███████║█████╗
   ██║     ██║██║   ██║██╔══██║   ██║           ██║   ██╔══██║██╔══╝
   ███████╗██║╚██████╔╝██║  ██║   ██║           ██║   ██║  ██║███████╗
   ╚══════╝╚═╝ ╚═════╝ ╚═╝  ╚═╝   ╚═╝           ╚═╝   ╚═╝  ╚═╝╚══════╝
   ── LIGHT THEMES ─────────────────────────────────────────────────
   ================================================================ */


/* ────────────────────────────────────────────────────────────────
   L1 · CLASSIC SAAS BLUE
   Clean, bright white canvas with a trustworthy blue accent.
   The professional default for daytime office work.
   ──────────────────────────────────────────────────────────────── */
[data-theme="classic-blue"] {
  --bg:           #f5f8fc;
  --bg-soft:      #ffffff;
  --bg-raised:    #eef2f8;
  --panel:        rgba(255, 255, 255, 0.90);
  --panel-strong: rgba(245, 248, 252, 0.98);
  --panel-hover:  rgba(238, 242, 248, 0.95);

  --line:         rgba(30, 80, 150, 0.12);
  --line-strong:  rgba(30, 80, 150, 0.22);

  --text:         #0f1e30;
  --text-soft:    #2e4a6a;
  --muted:        #7090b0;
  --muted-strong: #4a6880;

  --blue:         #1a72e0;
  --blue-dim:     rgba(26, 114, 224, 0.10);
  --blue-glow:    rgba(26, 114, 224, 0.18);
  --gold:         #d07800;
  --gold-strong:  #a85800;
  --gold-dim:     rgba(208, 120, 0, 0.10);
  --lime:         #1fa050;
  --lime-dark:    #137a3a;
  --lime-dim:     rgba(31, 160, 80, 0.10);
  --red:          #cc2222;
  --red-dim:      rgba(204, 34, 34, 0.10);
  --purple:       #7040cc;
  --purple-dim:   rgba(112, 64, 204, 0.10);

  --shadow-sm:    0 2px 8px rgba(0, 40, 100, 0.08);
  --shadow:       0 8px 32px rgba(0, 40, 100, 0.12);
  --shadow-lg:    0 20px 64px rgba(0, 40, 100, 0.16);
  --shadow-blue:  0 6px 24px rgba(26, 114, 224, 0.16);
  --shadow-lime:  0 6px 24px rgba(31, 160, 80, 0.14);
}


/* ────────────────────────────────────────────────────────────────
   L2 · ZEN SAND & SAGE
   Warm sand base with soft sage greens. Minimal and calming.
   Ideal for yoga studios, massage therapists, and wellness brands.
   ──────────────────────────────────────────────────────────────── */
[data-theme="zen-sand"] {
  --bg:           #f7f4ee;
  --bg-soft:      #fdfbf7;
  --bg-raised:    #eee9df;
  --panel:        rgba(253, 251, 247, 0.92);
  --panel-strong: rgba(247, 244, 238, 0.98);
  --panel-hover:  rgba(238, 233, 223, 0.95);

  --line:         rgba(140, 110, 70, 0.14);
  --line-strong:  rgba(140, 110, 70, 0.26);

  --text:         #2c2018;
  --text-soft:    #5a4030;
  --muted:        #9a7a5a;
  --muted-strong: #6a5040;

  --blue:         #4a8a78;
  --blue-dim:     rgba(74, 138, 120, 0.12);
  --blue-glow:    rgba(74, 138, 120, 0.20);
  --gold:         #b87820;
  --gold-strong:  #8c5a10;
  --gold-dim:     rgba(184, 120, 32, 0.12);
  --lime:         #5a9050;
  --lime-dark:    #3e7038;
  --lime-dim:     rgba(90, 144, 80, 0.12);
  --red:          #b84040;
  --red-dim:      rgba(184, 64, 64, 0.10);
  --purple:       #8060a0;
  --purple-dim:   rgba(128, 96, 160, 0.10);

  --shadow-sm:    0 2px 8px rgba(60, 40, 20, 0.08);
  --shadow:       0 8px 32px rgba(60, 40, 20, 0.10);
  --shadow-lg:    0 20px 64px rgba(60, 40, 20, 0.14);
  --shadow-blue:  0 6px 24px rgba(74, 138, 120, 0.14);
  --shadow-lime:  0 6px 24px rgba(90, 144, 80, 0.14);
}


/* ────────────────────────────────────────────────────────────────
   L3 · SOFT LAVENDER
   Light purple-gray canvas with violet and blush pink.
   Elegant and feminine — perfect for beauty salons and nail studios.
   ──────────────────────────────────────────────────────────────── */
[data-theme="soft-lavender"] {
  --bg:           #f4f2fa;
  --bg-soft:      #faf9fe;
  --bg-raised:    #eae6f4;
  --panel:        rgba(250, 249, 254, 0.92);
  --panel-strong: rgba(244, 242, 250, 0.98);
  --panel-hover:  rgba(234, 230, 244, 0.95);

  --line:         rgba(120, 80, 180, 0.12);
  --line-strong:  rgba(120, 80, 180, 0.22);

  --text:         #1e1428;
  --text-soft:    #3e2858;
  --muted:        #8070a8;
  --muted-strong: #5a4880;

  --blue:         #6040c8;
  --blue-dim:     rgba(96, 64, 200, 0.10);
  --blue-glow:    rgba(96, 64, 200, 0.18);
  --gold:         #e060a0;
  --gold-strong:  #b83a78;
  --gold-dim:     rgba(224, 96, 160, 0.10);
  --lime:         #5098c0;
  --lime-dark:    #2c78a0;
  --lime-dim:     rgba(80, 152, 192, 0.10);
  --red:          #c03060;
  --red-dim:      rgba(192, 48, 96, 0.10);
  --purple:       #9060e0;
  --purple-dim:   rgba(144, 96, 224, 0.10);

  --shadow-sm:    0 2px 8px rgba(80, 40, 140, 0.08);
  --shadow:       0 8px 32px rgba(80, 40, 140, 0.12);
  --shadow-lg:    0 20px 64px rgba(80, 40, 140, 0.16);
  --shadow-blue:  0 6px 24px rgba(96, 64, 200, 0.14);
  --shadow-lime:  0 6px 24px rgba(80, 152, 192, 0.14);
}


/* ────────────────────────────────────────────────────────────────
   L4 · TERRACOTTA WARMTH
   Warm off-white with terracotta, rust, and warm teal.
   Feels handcrafted and boutique — for artisan and craft studios.
   ──────────────────────────────────────────────────────────────── */
[data-theme="terracotta"] {
  --bg:           #f8f2ec;
  --bg-soft:      #fdf8f4;
  --bg-raised:    #efe5da;
  --panel:        rgba(253, 248, 244, 0.92);
  --panel-strong: rgba(248, 242, 236, 0.98);
  --panel-hover:  rgba(239, 229, 218, 0.95);

  --line:         rgba(160, 80, 40, 0.12);
  --line-strong:  rgba(160, 80, 40, 0.24);

  --text:         #261208;
  --text-soft:    #502818;
  --muted:        #a06040;
  --muted-strong: #704030;

  --blue:         #2a8888;
  --blue-dim:     rgba(42, 136, 136, 0.12);
  --blue-glow:    rgba(42, 136, 136, 0.20);
  --gold:         #c06020;
  --gold-strong:  #983a08;
  --gold-dim:     rgba(192, 96, 32, 0.12);
  --lime:         #588038;
  --lime-dark:    #3a6020;
  --lime-dim:     rgba(88, 128, 56, 0.12);
  --red:          #c03018;
  --red-dim:      rgba(192, 48, 24, 0.10);
  --purple:       #7850a8;
  --purple-dim:   rgba(120, 80, 168, 0.10);

  --shadow-sm:    0 2px 8px rgba(80, 30, 10, 0.08);
  --shadow:       0 8px 32px rgba(80, 30, 10, 0.12);
  --shadow-lg:    0 20px 64px rgba(80, 30, 10, 0.16);
  --shadow-blue:  0 6px 24px rgba(42, 136, 136, 0.14);
  --shadow-lime:  0 6px 24px rgba(88, 128, 56, 0.14);
}


/* ────────────────────────────────────────────────────────────────
   L5 · HIGH CONTRAST LIGHT
   Pure white with near-black text. Maximum readability.
   Passes WCAG AAA. Essential for accessibility-first workplaces.
   ──────────────────────────────────────────────────────────────── */
[data-theme="high-contrast-light"] {
  --bg:           #ffffff;
  --bg-soft:      #f0f0f0;
  --bg-raised:    #e4e4e4;
  --panel:        rgba(255, 255, 255, 0.98);
  --panel-strong: rgba(240, 240, 240, 1.00);
  --panel-hover:  rgba(228, 228, 228, 0.98);

  --line:         rgba(0, 0, 0, 0.18);
  --line-strong:  rgba(0, 0, 0, 0.36);

  --text:         #000000;
  --text-soft:    #1a1a1a;
  --muted:        #505050;
  --muted-strong: #333333;

  --blue:         #0050cc;
  --blue-dim:     rgba(0, 80, 204, 0.10);
  --blue-glow:    rgba(0, 80, 204, 0.18);
  --gold:         #b86000;
  --gold-strong:  #8c4400;
  --gold-dim:     rgba(184, 96, 0, 0.10);
  --lime:         #007820;
  --lime-dark:    #005010;
  --lime-dim:     rgba(0, 120, 32, 0.10);
  --red:          #cc0000;
  --red-dim:      rgba(204, 0, 0, 0.10);
  --purple:       #6600cc;
  --purple-dim:   rgba(102, 0, 204, 0.10);

  --shadow-sm:    0 1px 4px rgba(0, 0, 0, 0.12);
  --shadow:       0 4px 16px rgba(0, 0, 0, 0.16);
  --shadow-lg:    0 12px 40px rgba(0, 0, 0, 0.20);
  --shadow-blue:  0 4px 16px rgba(0, 80, 204, 0.14);
  --shadow-lime:  0 4px 16px rgba(0, 120, 32, 0.14);
}


/* ────────────────────────────────────────────────────────────────
   L6 · SKY MORNING
   Pale blue canvas with crisp white surfaces and productive accents.
   Bright without becoming sterile.
   ──────────────────────────────────────────────────────────────── */
[data-theme="sky-morning"] {
  --bg:           #edf7ff;
  --bg-soft:      #ffffff;
  --bg-raised:    #dfeefa;
  --panel:        rgba(255, 255, 255, 0.92);
  --panel-strong: rgba(237, 247, 255, 0.98);
  --panel-hover:  rgba(223, 238, 250, 0.95);

  --line:         rgba(38, 104, 170, 0.13);
  --line-strong:  rgba(38, 104, 170, 0.24);

  --text:         #102033;
  --text-soft:    #33526f;
  --muted:        #6e91b2;
  --muted-strong: #4d7192;

  --blue:         #0f86d8;
  --blue-dim:     rgba(15, 134, 216, 0.10);
  --blue-glow:    rgba(15, 134, 216, 0.18);
  --gold:         #c77a16;
  --gold-strong:  #9d5708;
  --gold-dim:     rgba(199, 122, 22, 0.10);
  --lime:         #198f63;
  --lime-dark:    #0f704c;
  --lime-dim:     rgba(25, 143, 99, 0.10);
  --red:          #c83737;
  --red-dim:      rgba(200, 55, 55, 0.10);
  --purple:       #6f54d9;
  --purple-dim:   rgba(111, 84, 217, 0.10);

  --shadow-sm:    0 2px 8px rgba(20, 78, 130, 0.08);
  --shadow:       0 8px 32px rgba(20, 78, 130, 0.12);
  --shadow-lg:    0 20px 64px rgba(20, 78, 130, 0.16);
  --shadow-blue:  0 6px 24px rgba(15, 134, 216, 0.16);
  --shadow-lime:  0 6px 24px rgba(25, 143, 99, 0.14);
}


/* ────────────────────────────────────────────────────────────────
   L7 · FOREST MIST
   Soft green daylight with teal and amber accents.
   Calm, readable, and less warm than sand-based palettes.
   ──────────────────────────────────────────────────────────────── */
[data-theme="forest-mist"] {
  --bg:           #eef8f1;
  --bg-soft:      #fbfefc;
  --bg-raised:    #dcefe3;
  --panel:        rgba(251, 254, 252, 0.92);
  --panel-strong: rgba(238, 248, 241, 0.98);
  --panel-hover:  rgba(220, 239, 227, 0.95);

  --line:         rgba(45, 112, 68, 0.13);
  --line-strong:  rgba(45, 112, 68, 0.24);

  --text:         #12261b;
  --text-soft:    #345844;
  --muted:        #6a8f77;
  --muted-strong: #4f725d;

  --blue:         #287d8e;
  --blue-dim:     rgba(40, 125, 142, 0.10);
  --blue-glow:    rgba(40, 125, 142, 0.18);
  --gold:         #b7791f;
  --gold-strong:  #8e5610;
  --gold-dim:     rgba(183, 121, 31, 0.10);
  --lime:         #238a4b;
  --lime-dark:    #176b37;
  --lime-dim:     rgba(35, 138, 75, 0.10);
  --red:          #bf3d3d;
  --red-dim:      rgba(191, 61, 61, 0.10);
  --purple:       #7357bf;
  --purple-dim:   rgba(115, 87, 191, 0.10);

  --shadow-sm:    0 2px 8px rgba(36, 96, 54, 0.08);
  --shadow:       0 8px 32px rgba(36, 96, 54, 0.11);
  --shadow-lg:    0 20px 64px rgba(36, 96, 54, 0.15);
  --shadow-blue:  0 6px 24px rgba(40, 125, 142, 0.14);
  --shadow-lime:  0 6px 24px rgba(35, 138, 75, 0.14);
}


/* ────────────────────────────────────────────────────────────────
   L8 · ROSE BLOOM
   Soft rose surfaces with cool blue, green, and berry accents.
   Polished for beauty, wellness, and boutique service workflows.
   ──────────────────────────────────────────────────────────────── */
[data-theme="rose-bloom"] {
  --bg:           #fff3f7;
  --bg-soft:      #fffafd;
  --bg-raised:    #f7e3ea;
  --panel:        rgba(255, 250, 253, 0.92);
  --panel-strong: rgba(255, 243, 247, 0.98);
  --panel-hover:  rgba(247, 227, 234, 0.95);

  --line:         rgba(170, 70, 105, 0.13);
  --line-strong:  rgba(170, 70, 105, 0.24);

  --text:         #2b1320;
  --text-soft:    #633047;
  --muted:        #9b6d80;
  --muted-strong: #764a5d;

  --blue:         #4f78d7;
  --blue-dim:     rgba(79, 120, 215, 0.10);
  --blue-glow:    rgba(79, 120, 215, 0.18);
  --gold:         #c66a34;
  --gold-strong:  #9c431c;
  --gold-dim:     rgba(198, 106, 52, 0.10);
  --lime:         #2f9473;
  --lime-dark:    #1f7459;
  --lime-dim:     rgba(47, 148, 115, 0.10);
  --red:          #c63d68;
  --red-dim:      rgba(198, 61, 104, 0.10);
  --purple:       #a54fb5;
  --purple-dim:   rgba(165, 79, 181, 0.10);

  --shadow-sm:    0 2px 8px rgba(130, 45, 80, 0.08);
  --shadow:       0 8px 32px rgba(130, 45, 80, 0.12);
  --shadow-lg:    0 20px 64px rgba(130, 45, 80, 0.16);
  --shadow-blue:  0 6px 24px rgba(79, 120, 215, 0.14);
  --shadow-lime:  0 6px 24px rgba(47, 148, 115, 0.14);
}


/* ================================================================
   LIGHT THEME — body background flip
   When any light theme is active, ensure body bg is solid
   (no dark transparent gradient fallbacks bleed through).
   ================================================================ */
[data-theme="classic-blue"],
[data-theme="zen-sand"],
[data-theme="soft-lavender"],
[data-theme="terracotta"],
[data-theme="high-contrast-light"],
[data-theme="sky-morning"],
[data-theme="forest-mist"],
[data-theme="rose-bloom"] {
  color-scheme: light;
}
[data-theme="midnight-slate"],
[data-theme="deep-forest"],
[data-theme="oled-black"],
[data-theme="cyber-indigo"],
[data-theme="mocha-dark"],
[data-theme="graphite-copper"],
[data-theme="aubergine-noir"],
[data-theme="marine-night"] {
  color-scheme: dark;
}

/* ================================================================
   SMOOTH THEME TRANSITION
   Applied briefly when theme changes so the swap animates.
   JS adds .theme-transitioning to <html>, removes after 300ms.
   ================================================================ */
.theme-transitioning,
.theme-transitioning * {
  transition:
    background-color var(--dur-slow) var(--ease),
    border-color     var(--dur-slow) var(--ease),
    color            var(--dur-slow) var(--ease),
    box-shadow       var(--dur-slow) var(--ease) !important;
}