/* ============================================================
   G SHOPS — themes (premium)
   Five hand-tuned palettes with strong contrast & gradient surfaces.
   Standard (professional blue) is the default.
   Extra vars consumed by style.css: panel-gradient, ring, btn-grad,
   btn-grad-2, active-grad, icon-grad, glow, card-hover, page-grad
   ============================================================ */

/* ---------- STANDARD — professional blue (default) ---------- */
body[data-theme="standard"] {
  --bg: #eef2f8;
  --bg2: #e7ecf4;
  --page-grad: radial-gradient(1200px 600px at 85% -10%, rgba(37,99,235,.06), transparent 60%),
               radial-gradient(900px 500px at -10% 110%, rgba(14,165,233,.05), transparent 55%);
  --panel: #ffffff;
  --panel2: #f8fafd;
  --panel-gradient: linear-gradient(180deg, #ffffff 0%, #f8fafd 100%);
  --topbar: rgba(255,255,255,.82);
  --ink: #0f1e35;
  --muted: #54647c;
  --muted2: #8b9ab1;
  --placeholder: #97a5bb;
  --line: rgba(15,30,53,.11);
  --line-strong: #cfd9e6;
  --hover: rgba(15,30,53,.045);
  --nav-group: #8596ad;
  --shadow-soft: rgba(15,23,42,.07);
  --overlay: rgba(9,18,34,.45);
  --input-bg: #ffffff;
  --ring: rgba(37,99,235,.22);
  --accent: #2563eb;
  --accent-2: #3b82f6;
  --accent-ink: #ffffff;
  --accent-soft: rgba(37,99,235,.09);
  --accent-soft2: rgba(14,165,233,.06);
  --accent-line: rgba(37,99,235,.28);
  --btn-grad: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  --btn-grad-2: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%);
  --active-grad: linear-gradient(90deg, rgba(37,99,235,.14), rgba(37,99,235,.05));
  --icon-grad: linear-gradient(135deg, rgba(37,99,235,.16), rgba(14,165,233,.10));
  --glow: 0 6px 18px -4px rgba(37,99,235,.45);
  --card-hover: 0 14px 34px -12px rgba(15,23,42,.18);
  --danger: #dc2626; --danger-soft: rgba(220,38,38,.08); --danger-line: rgba(220,38,38,.3); --danger-text: #b91c1c;
  --warn: #d97706; --warn-soft: rgba(217,119,6,.10); --warn-line: rgba(217,119,6,.3); --warn-text: #b45309;
  --info: #0891b2; --info-soft: rgba(8,145,178,.08); --info-line: rgba(8,145,178,.3); --info-text: #0e7490;
  --ok: #16a34a; --ok-soft: rgba(22,163,74,.10); --ok-text: #15803d;
  --muted-soft: rgba(100,116,139,.10);
}

/* ---------- MIDNIGHT — deep navy + emerald ---------- */
body[data-theme="midnight"] {
  --bg: #070d1a;
  --bg2: #0b1322;
  --page-grad: radial-gradient(1200px 600px at 85% -10%, rgba(16,185,129,.08), transparent 60%),
               radial-gradient(900px 500px at -10% 110%, rgba(56,189,248,.06), transparent 55%);
  --panel: #0e1830;
  --panel2: #0a1326;
  --panel-gradient: linear-gradient(180deg, #101c36 0%, #0c1529 100%);
  --topbar: rgba(7,13,26,.78);
  --ink: #e9f0fb;
  --muted: #93a4c4;
  --muted2: #64748b;
  --placeholder: #51607d;
  --line: rgba(147,164,196,.14);
  --line-strong: #22304e;
  --hover: rgba(255,255,255,.05);
  --nav-group: #5d6f92;
  --shadow-soft: rgba(0,0,0,.25);
  --overlay: rgba(2,6,14,.78);
  --input-bg: #0a1326;
  --ring: rgba(16,185,129,.28);
  --accent: #10b981;
  --accent-2: #34d399;
  --accent-ink: #04120d;
  --accent-soft: rgba(16,185,129,.15);
  --accent-soft2: rgba(56,189,248,.09);
  --accent-line: rgba(16,185,129,.38);
  --btn-grad: linear-gradient(180deg, #14c88f 0%, #0ca678 100%);
  --btn-grad-2: linear-gradient(180deg, #34d399 0%, #10b981 100%);
  --active-grad: linear-gradient(90deg, rgba(16,185,129,.22), rgba(16,185,129,.06));
  --icon-grad: linear-gradient(135deg, rgba(16,185,129,.22), rgba(56,189,248,.12));
  --glow: 0 6px 18px -4px rgba(16,185,129,.5);
  --card-hover: 0 14px 34px -12px rgba(0,0,0,.55);
  --danger: #f43f5e; --danger-soft: rgba(244,63,94,.13); --danger-line: rgba(244,63,94,.4); --danger-text: #fda4af;
  --warn: #f59e0b; --warn-soft: rgba(245,158,11,.13); --warn-line: rgba(245,158,11,.4); --warn-text: #fcd34d;
  --info: #38bdf8; --info-soft: rgba(56,189,248,.13); --info-line: rgba(56,189,248,.35); --info-text: #bae6fd;
  --ok: #22c55e; --ok-soft: rgba(34,197,94,.14); --ok-text: #4ade80;
  --muted-soft: rgba(100,116,139,.18);
}

/* ---------- LIGHT — crisp clean emerald ---------- */
body[data-theme="light"] {
  --bg: #f2f6f3;
  --bg2: #e8efea;
  --page-grad: radial-gradient(1200px 600px at 85% -10%, rgba(5,150,105,.06), transparent 60%),
               radial-gradient(900px 500px at -10% 110%, rgba(14,165,233,.05), transparent 55%);
  --panel: #ffffff;
  --panel2: #f7faf8;
  --panel-gradient: linear-gradient(180deg, #ffffff 0%, #f7faf8 100%);
  --topbar: rgba(255,255,255,.84);
  --ink: #10211a;
  --muted: #4f6a5d;
  --muted2: #7d9589;
  --placeholder: #93a89d;
  --line: rgba(16,33,26,.11);
  --line-strong: #c9d8d0;
  --hover: rgba(16,33,26,.05);
  --nav-group: #8ba294;
  --shadow-soft: rgba(15,23,42,.06);
  --overlay: rgba(12,25,19,.4);
  --input-bg: #ffffff;
  --ring: rgba(5,150,105,.22);
  --accent: #047857;
  --accent-2: #059669;
  --accent-ink: #ffffff;
  --accent-soft: rgba(5,150,105,.10);
  --accent-soft2: rgba(14,165,233,.06);
  --accent-line: rgba(5,150,105,.30);
  --btn-grad: linear-gradient(180deg, #059669 0%, #047857 100%);
  --btn-grad-2: linear-gradient(180deg, #10b981 0%, #059669 100%);
  --active-grad: linear-gradient(90deg, rgba(5,150,105,.14), rgba(5,150,105,.05));
  --icon-grad: linear-gradient(135deg, rgba(5,150,105,.16), rgba(14,165,233,.09));
  --glow: 0 6px 18px -4px rgba(5,150,105,.45);
  --card-hover: 0 14px 34px -12px rgba(15,23,42,.16);
  --danger: #dc2626; --danger-soft: rgba(220,38,38,.08); --danger-line: rgba(220,38,38,.3); --danger-text: #b91c1c;
  --warn: #d97706; --warn-soft: rgba(217,119,6,.10); --warn-line: rgba(217,119,6,.3); --warn-text: #b45309;
  --info: #0891b2; --info-soft: rgba(8,145,178,.08); --info-line: rgba(8,145,178,.3); --info-text: #0e7490;
  --ok: #16a34a; --ok-soft: rgba(22,163,74,.10); --ok-text: #15803d;
  --muted-soft: rgba(100,116,139,.10);
}

/* ---------- OCEAN — deep sea blues ---------- */
body[data-theme="ocean"] {
  --bg: #eef4fa;
  --bg2: #e5edf6;
  --page-grad: radial-gradient(1200px 600px at 85% -10%, rgba(2,132,199,.08), transparent 60%),
               radial-gradient(900px 500px at -10% 110%, rgba(37,99,235,.05), transparent 55%);
  --panel: #ffffff;
  --panel2: #f6fafd;
  --panel-gradient: linear-gradient(180deg, #ffffff 0%, #f3f9fd 100%);
  --topbar: rgba(255,255,255,.84);
  --ink: #0b2436;
  --muted: #48657b;
  --muted2: #7e99ad;
  --placeholder: #91aabe;
  --line: rgba(11,36,54,.11);
  --line-strong: #c5d8e6;
  --hover: rgba(11,36,54,.05);
  --nav-group: #7d98ac;
  --shadow-soft: rgba(15,23,42,.06);
  --overlay: rgba(8,26,40,.42);
  --input-bg: #ffffff;
  --ring: rgba(2,132,199,.22);
  --accent: #0284c7;
  --accent-2: #0ea5e9;
  --accent-ink: #ffffff;
  --accent-soft: rgba(2,132,199,.10);
  --accent-soft2: rgba(139,92,246,.07);
  --accent-line: rgba(2,132,199,.30);
  --btn-grad: linear-gradient(180deg, #0ea5e9 0%, #0284c7 100%);
  --btn-grad-2: linear-gradient(180deg, #38bdf8 0%, #0ea5e9 100%);
  --active-grad: linear-gradient(90deg, rgba(2,132,199,.15), rgba(2,132,199,.05));
  --icon-grad: linear-gradient(135deg, rgba(2,132,199,.16), rgba(139,92,246,.10));
  --glow: 0 6px 18px -4px rgba(2,132,199,.45);
  --card-hover: 0 14px 34px -12px rgba(15,23,42,.17);
  --danger: #dc2626; --danger-soft: rgba(220,38,38,.08); --danger-line: rgba(220,38,38,.3); --danger-text: #b91c1c;
  --warn: #d97706; --warn-soft: rgba(217,119,6,.10); --warn-line: rgba(217,119,6,.3); --warn-text: #b45309;
  --info: #0891b2; --info-soft: rgba(8,145,178,.08); --info-line: rgba(8,145,178,.3); --info-text: #0e7490;
  --ok: #16a34a; --ok-soft: rgba(22,163,74,.10); --ok-text: #15803d;
  --muted-soft: rgba(100,116,139,.10);
}

/* ---------- VIOLET — premium purple ---------- */
body[data-theme="violet"] {
  --bg: #f4f1f9;
  --bg2: #ece7f4;
  --page-grad: radial-gradient(1200px 600px at 85% -10%, rgba(147,51,234,.08), transparent 60%),
               radial-gradient(900px 500px at -10% 110%, rgba(236,72,153,.05), transparent 55%);
  --panel: #ffffff;
  --panel2: #faf7fd;
  --panel-gradient: linear-gradient(180deg, #ffffff 0%, #f7f3fb 100%);
  --topbar: rgba(255,255,255,.84);
  --ink: #241238;
  --muted: #65507c;
  --muted2: #9783ac;
  --placeholder: #a18fb5;
  --line: rgba(36,18,56,.11);
  --line-strong: #d9cdea;
  --hover: rgba(36,18,56,.05);
  --nav-group: #9a87af;
  --shadow-soft: rgba(15,23,42,.07);
  --overlay: rgba(28,12,46,.42);
  --input-bg: #ffffff;
  --ring: rgba(147,51,234,.22);
  --accent: #7c3aed;
  --accent-2: #a855f7;
  --accent-ink: #ffffff;
  --accent-soft: rgba(124,58,237,.10);
  --accent-soft2: rgba(236,72,153,.07);
  --accent-line: rgba(124,58,237,.30);
  --btn-grad: linear-gradient(180deg, #9333ea 0%, #7c3aed 100%);
  --btn-grad-2: linear-gradient(180deg, #a855f7 0%, #9333ea 100%);
  --active-grad: linear-gradient(90deg, rgba(124,58,237,.15), rgba(124,58,237,.05));
  --icon-grad: linear-gradient(135deg, rgba(124,58,237,.16), rgba(236,72,153,.10));
  --glow: 0 6px 18px -4px rgba(124,58,237,.45);
  --card-hover: 0 14px 34px -12px rgba(15,23,42,.18);
  --danger: #dc2626; --danger-soft: rgba(220,38,38,.08); --danger-line: rgba(220,38,38,.3); --danger-text: #b91c1c;
  --warn: #d97706; --warn-soft: rgba(217,119,6,.10); --warn-line: rgba(217,119,6,.3); --warn-text: #b45309;
  --info: #0891b2; --info-soft: rgba(8,145,178,.08); --info-line: rgba(8,145,178,.3); --info-text: #0e7490;
  --ok: #16a34a; --ok-soft: rgba(22,163,74,.10); --ok-text: #15803d;
  --muted-soft: rgba(100,116,139,.10);
}

/* ---------- RETAILMAN-STYLE THEMES ---------- */
body[data-theme="retailman"] {
  --bg: #eef1f6;
  --bg2: #e4e9f1;
  --page-grad: radial-gradient(1200px 600px at 85% -10%, rgba(37,99,235,.08), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(59,130,246,.05), transparent 55%);
  --panel: #ffffff;
  --panel2: #f7f9fc;
  --panel-gradient: linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%);
  --topbar: rgba(255,255,255,.86);
  --ink: #0f1b33;
  --muted: #4c5b76;
  --muted2: #8491ab;
  --placeholder: #93a0b8;
  --line: rgba(15,27,51,.11);
  --line-strong: #c9d3e4;
  --hover: rgba(15,27,51,.05);
  --nav-group: #6f7f9c;
  --shadow-soft: rgba(15,23,42,.06);
  --overlay: rgba(10,20,40,.42);
  --input-bg: #ffffff;
  --ring: rgba(37,99,235,.22);
  --accent: #1d4ed8;
  --accent-2: #2563eb;
  --accent-ink: #ffffff;
  --accent-soft: rgba(29,78,216,.10);
  --accent-soft2: rgba(139,92,246,.07);
  --accent-line: rgba(29,78,216,.30);
  --btn-grad: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  --btn-grad-2: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  --active-grad: linear-gradient(90deg, rgba(29,78,216,.15), rgba(29,78,216,.05));
  --icon-grad: linear-gradient(135deg, rgba(29,78,216,.16), rgba(37,99,235,.10));
  --glow: 0 6px 18px -4px rgba(37,99,235,.45);
  --card-hover: 0 14px 34px -12px rgba(15,23,42,.17);
  --danger: #dc2626; --danger-soft: rgba(220,38,38,.08); --danger-line: rgba(220,38,38,.3); --danger-text: #b91c1c;
  --warn: #d97706; --warn-soft: rgba(217,119,6,.10); --warn-line: rgba(217,119,6,.3); --warn-text: #b45309;
  --info: #0891b2; --info-soft: rgba(8,145,178,.08); --info-line: rgba(8,145,178,.3); --info-text: #0e7490;
  --ok: #16a34a; --ok-soft: rgba(22,163,74,.10); --ok-text: #15803d;
  --muted-soft: rgba(100,116,139,.10);
}

body[data-theme="emerald"] {
  --bg: #eef7f2;
  --bg2: #e4f1ea;
  --page-grad: radial-gradient(1200px 600px at 85% -10%, rgba(16,185,129,.08), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(5,150,105,.05), transparent 55%);
  --panel: #ffffff;
  --panel2: #f7fcf9;
  --panel-gradient: linear-gradient(180deg, #ffffff 0%, #f2faf6 100%);
  --topbar: rgba(255,255,255,.86);
  --ink: #052e22;
  --muted: #3f6b5c;
  --muted2: #7fa394;
  --placeholder: #8fb3a3;
  --line: rgba(5,46,34,.11);
  --line-strong: #c2ddd2;
  --hover: rgba(5,46,34,.05);
  --nav-group: #5f8a78;
  --shadow-soft: rgba(15,23,42,.06);
  --overlay: rgba(3,30,22,.42);
  --input-bg: #ffffff;
  --ring: rgba(16,185,129,.22);
  --accent: #059669;
  --accent-2: #10b981;
  --accent-ink: #ffffff;
  --accent-soft: rgba(5,150,105,.10);
  --accent-soft2: rgba(139,92,246,.07);
  --accent-line: rgba(5,150,105,.30);
  --btn-grad: linear-gradient(180deg, #10b981 0%, #059669 100%);
  --btn-grad-2: linear-gradient(180deg, #34d399 0%, #10b981 100%);
  --active-grad: linear-gradient(90deg, rgba(5,150,105,.15), rgba(5,150,105,.05));
  --icon-grad: linear-gradient(135deg, rgba(5,150,105,.16), rgba(16,185,129,.10));
  --glow: 0 6px 18px -4px rgba(16,185,129,.45);
  --card-hover: 0 14px 34px -12px rgba(15,23,42,.17);
  --danger: #dc2626; --danger-soft: rgba(220,38,38,.08); --danger-line: rgba(220,38,38,.3); --danger-text: #b91c1c;
  --warn: #d97706; --warn-soft: rgba(217,119,6,.10); --warn-line: rgba(217,119,6,.3); --warn-text: #b45309;
  --info: #0891b2; --info-soft: rgba(8,145,178,.08); --info-line: rgba(8,145,178,.3); --info-text: #0e7490;
  --ok: #16a34a; --ok-soft: rgba(22,163,74,.10); --ok-text: #15803d;
  --muted-soft: rgba(100,116,139,.10);
}

body[data-theme="sunset"] {
  --bg: #fdf3ea;
  --bg2: #f9eadb;
  --page-grad: radial-gradient(1200px 600px at 85% -10%, rgba(249,115,22,.08), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(234,88,12,.05), transparent 55%);
  --panel: #ffffff;
  --panel2: #fffaf6;
  --panel-gradient: linear-gradient(180deg, #ffffff 0%, #fdf3e9 100%);
  --topbar: rgba(255,255,255,.86);
  --ink: #431407;
  --muted: #7c5a44;
  --muted2: #a6836c;
  --placeholder: #b2957c;
  --line: rgba(67,20,7,.11);
  --line-strong: #ecc9b0;
  --hover: rgba(67,20,7,.05);
  --nav-group: #96694e;
  --shadow-soft: rgba(15,23,42,.06);
  --overlay: rgba(40,16,6,.42);
  --input-bg: #ffffff;
  --ring: rgba(249,115,22,.22);
  --accent: #ea580c;
  --accent-2: #f97316;
  --accent-ink: #ffffff;
  --accent-soft: rgba(234,88,12,.10);
  --accent-soft2: rgba(139,92,246,.07);
  --accent-line: rgba(234,88,12,.30);
  --btn-grad: linear-gradient(180deg, #f97316 0%, #ea580c 100%);
  --btn-grad-2: linear-gradient(180deg, #fb923c 0%, #f97316 100%);
  --active-grad: linear-gradient(90deg, rgba(234,88,12,.15), rgba(234,88,12,.05));
  --icon-grad: linear-gradient(135deg, rgba(234,88,12,.16), rgba(249,115,22,.10));
  --glow: 0 6px 18px -4px rgba(249,115,22,.45);
  --card-hover: 0 14px 34px -12px rgba(15,23,42,.17);
  --danger: #dc2626; --danger-soft: rgba(220,38,38,.08); --danger-line: rgba(220,38,38,.3); --danger-text: #b91c1c;
  --warn: #d97706; --warn-soft: rgba(217,119,6,.10); --warn-line: rgba(217,119,6,.3); --warn-text: #b45309;
  --info: #0891b2; --info-soft: rgba(8,145,178,.08); --info-line: rgba(8,145,178,.3); --info-text: #0e7490;
  --ok: #16a34a; --ok-soft: rgba(22,163,74,.10); --ok-text: #15803d;
  --muted-soft: rgba(100,116,139,.10);
}

body[data-theme="slate"] {
  --bg: #f2f4f6;
  --bg2: #e9ecef;
  --page-grad: radial-gradient(1200px 600px at 85% -10%, rgba(100,116,139,.07), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(51,65,85,.05), transparent 55%);
  --panel: #ffffff;
  --panel2: #f9fafb;
  --panel-gradient: linear-gradient(180deg, #ffffff 0%, #f5f7f9 100%);
  --topbar: rgba(255,255,255,.86);
  --ink: #0f172a;
  --muted: #4b5563;
  --muted2: #8494a8;
  --placeholder: #94a3b8;
  --line: rgba(15,23,42,.11);
  --line-strong: #cbd5e1;
  --hover: rgba(15,23,42,.05);
  --nav-group: #6b7280;
  --shadow-soft: rgba(15,23,42,.06);
  --overlay: rgba(10,15,25,.42);
  --input-bg: #ffffff;
  --ring: rgba(71,85,105,.22);
  --accent: #334155;
  --accent-2: #475569;
  --accent-ink: #ffffff;
  --accent-soft: rgba(51,65,85,.10);
  --accent-soft2: rgba(139,92,246,.07);
  --accent-line: rgba(51,65,85,.30);
  --btn-grad: linear-gradient(180deg, #475569 0%, #334155 100%);
  --btn-grad-2: linear-gradient(180deg, #64748b 0%, #475569 100%);
  --active-grad: linear-gradient(90deg, rgba(51,65,85,.15), rgba(51,65,85,.05));
  --icon-grad: linear-gradient(135deg, rgba(51,65,85,.16), rgba(71,85,105,.10));
  --glow: 0 6px 18px -4px rgba(71,85,105,.45);
  --card-hover: 0 14px 34px -12px rgba(15,23,42,.17);
  --danger: #dc2626; --danger-soft: rgba(220,38,38,.08); --danger-line: rgba(220,38,38,.3); --danger-text: #b91c1c;
  --warn: #d97706; --warn-soft: rgba(217,119,6,.10); --warn-line: rgba(217,119,6,.3); --warn-text: #b45309;
  --info: #0891b2; --info-soft: rgba(8,145,178,.08); --info-line: rgba(8,145,178,.3); --info-text: #0e7490;
  --ok: #16a34a; --ok-soft: rgba(22,163,74,.10); --ok-text: #15803d;
  --muted-soft: rgba(100,116,139,.10);
}

body[data-theme="cherry"] {
  --bg: #fdf0f0;
  --bg2: #f8e4e4;
  --page-grad: radial-gradient(1200px 600px at 85% -10%, rgba(239,68,68,.08), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(220,38,38,.05), transparent 55%);
  --panel: #ffffff;
  --panel2: #fff8f8;
  --panel-gradient: linear-gradient(180deg, #ffffff 0%, #fdf3f3 100%);
  --topbar: rgba(255,255,255,.86);
  --ink: #3f0d0d;
  --muted: #7a4a4a;
  --muted2: #a87c7c;
  --placeholder: #b89393;
  --line: rgba(63,13,13,.11);
  --line-strong: #ecc2c2;
  --hover: rgba(63,13,13,.05);
  --nav-group: #925c5c;
  --shadow-soft: rgba(15,23,42,.06);
  --overlay: rgba(40,10,10,.42);
  --input-bg: #ffffff;
  --ring: rgba(239,68,68,.22);
  --accent: #dc2626;
  --accent-2: #ef4444;
  --accent-ink: #ffffff;
  --accent-soft: rgba(220,38,38,.10);
  --accent-soft2: rgba(139,92,246,.07);
  --accent-line: rgba(220,38,38,.30);
  --btn-grad: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
  --btn-grad-2: linear-gradient(180deg, #f87171 0%, #ef4444 100%);
  --active-grad: linear-gradient(90deg, rgba(220,38,38,.15), rgba(220,38,38,.05));
  --icon-grad: linear-gradient(135deg, rgba(220,38,38,.16), rgba(239,68,68,.10));
  --glow: 0 6px 18px -4px rgba(239,68,68,.45);
  --card-hover: 0 14px 34px -12px rgba(15,23,42,.17);
  --danger: #dc2626; --danger-soft: rgba(220,38,38,.08); --danger-line: rgba(220,38,38,.3); --danger-text: #b91c1c;
  --warn: #d97706; --warn-soft: rgba(217,119,6,.10); --warn-line: rgba(217,119,6,.3); --warn-text: #b45309;
  --info: #0891b2; --info-soft: rgba(8,145,178,.08); --info-line: rgba(8,145,178,.3); --info-text: #0e7490;
  --ok: #16a34a; --ok-soft: rgba(22,163,74,.10); --ok-text: #15803d;
  --muted-soft: rgba(100,116,139,.10);
}


/* ============================================================
   EXTRA COOL THEMES — six additional premium palettes
   ============================================================ */

/* ---------- CORAL ENERGY ---------- */
body[data-theme="coral"] {
  --bg:#fff4f1; --bg2:#ffe8e2; --page-grad:radial-gradient(1100px 550px at 90% -10%,rgba(244,63,94,.10),transparent 60%),radial-gradient(800px 450px at -10% 110%,rgba(251,146,60,.08),transparent 55%);
  --panel:#fff; --panel2:#fff9f7; --panel-gradient:linear-gradient(180deg,#fff 0%,#fff6f3 100%); --topbar:rgba(255,255,255,.86);
  --ink:#35131a; --muted:#76515a; --muted2:#a47b84; --placeholder:#b18a92; --line:rgba(53,19,26,.11); --line-strong:#efd0c9; --hover:rgba(244,63,94,.05); --nav-group:#a77b84; --shadow-soft:rgba(80,20,30,.07); --overlay:rgba(40,8,16,.45); --input-bg:#fff;
  --ring:rgba(244,63,94,.22); --accent:#e11d48; --accent-2:#fb7185; --accent-ink:#fff; --accent-soft:rgba(244,63,94,.10); --accent-soft2:rgba(251,146,60,.08); --accent-line:rgba(244,63,94,.30);
  --btn-grad:linear-gradient(180deg,#fb7185,#e11d48); --btn-grad-2:linear-gradient(180deg,#fda4af,#fb7185); --active-grad:linear-gradient(90deg,rgba(244,63,94,.15),rgba(244,63,94,.04)); --icon-grad:linear-gradient(135deg,rgba(244,63,94,.16),rgba(251,146,60,.10)); --glow:0 6px 18px -4px rgba(244,63,94,.42); --card-hover:0 14px 34px -12px rgba(80,20,30,.18);
  --danger:#b91c1c; --danger-soft:rgba(185,28,28,.08); --danger-line:rgba(185,28,28,.3); --danger-text:#991b1b; --warn:#d97706; --warn-soft:rgba(217,119,6,.10); --warn-line:rgba(217,119,6,.3); --warn-text:#b45309; --info:#0284c7; --info-soft:rgba(2,132,199,.08); --info-line:rgba(2,132,199,.3); --info-text:#0369a1; --ok:#16a34a; --ok-soft:rgba(22,163,74,.10); --ok-text:#15803d; --muted-soft:rgba(100,116,139,.10);
}

/* ---------- TROPICAL FRESH ---------- */
body[data-theme="tropical"] {
  --bg:#effcf7; --bg2:#e0f7ef; --page-grad:radial-gradient(1100px 550px at 90% -10%,rgba(16,185,129,.10),transparent 60%),radial-gradient(800px 450px at -10% 110%,rgba(6,182,212,.08),transparent 55%);
  --panel:#fff; --panel2:#f5fffb; --panel-gradient:linear-gradient(180deg,#fff,#f2fcf8); --topbar:rgba(255,255,255,.86);
  --ink:#08352b; --muted:#4d7469; --muted2:#7da399; --placeholder:#8fb2a9; --line:rgba(8,53,43,.11); --line-strong:#c8e4da; --hover:rgba(8,53,43,.05); --nav-group:#82a69b; --shadow-soft:rgba(8,53,43,.07); --overlay:rgba(2,35,28,.45); --input-bg:#fff;
  --ring:rgba(16,185,129,.22); --accent:#059669; --accent-2:#14b8a6; --accent-ink:#fff; --accent-soft:rgba(5,150,105,.10); --accent-soft2:rgba(6,182,212,.08); --accent-line:rgba(5,150,105,.30);
  --btn-grad:linear-gradient(180deg,#10b981,#059669); --btn-grad-2:linear-gradient(180deg,#2dd4bf,#14b8a6); --active-grad:linear-gradient(90deg,rgba(5,150,105,.15),rgba(5,150,105,.04)); --icon-grad:linear-gradient(135deg,rgba(5,150,105,.16),rgba(6,182,212,.10)); --glow:0 6px 18px -4px rgba(5,150,105,.42); --card-hover:0 14px 34px -12px rgba(8,53,43,.17);
  --danger:#dc2626; --danger-soft:rgba(220,38,38,.08); --danger-line:rgba(220,38,38,.3); --danger-text:#b91c1c; --warn:#d97706; --warn-soft:rgba(217,119,6,.10); --warn-line:rgba(217,119,6,.3); --warn-text:#b45309; --info:#0891b2; --info-soft:rgba(8,145,178,.08); --info-line:rgba(8,145,178,.3); --info-text:#0e7490; --ok:#16a34a; --ok-soft:rgba(22,163,74,.10); --ok-text:#15803d; --muted-soft:rgba(100,116,139,.10);
}

/* ---------- ROYAL INDIGO ---------- */
body[data-theme="royal"] {
  --bg:#f3f2ff; --bg2:#e9e7ff; --page-grad:radial-gradient(1100px 550px at 90% -10%,rgba(79,70,229,.10),transparent 60%),radial-gradient(800px 450px at -10% 110%,rgba(168,85,247,.08),transparent 55%);
  --panel:#fff; --panel2:#faf9ff; --panel-gradient:linear-gradient(180deg,#fff,#f6f5ff); --topbar:rgba(255,255,255,.86);
  --ink:#18154a; --muted:#5d5a82; --muted2:#8986a8; --placeholder:#9c99b8; --line:rgba(24,21,74,.11); --line-strong:#d4d2ec; --hover:rgba(79,70,229,.05); --nav-group:#8f8caf; --shadow-soft:rgba(24,21,74,.07); --overlay:rgba(18,15,64,.46); --input-bg:#fff;
  --ring:rgba(79,70,229,.22); --accent:#4f46e5; --accent-2:#7c3aed; --accent-ink:#fff; --accent-soft:rgba(79,70,229,.10); --accent-soft2:rgba(168,85,247,.08); --accent-line:rgba(79,70,229,.30);
  --btn-grad:linear-gradient(180deg,#6366f1,#4f46e5); --btn-grad-2:linear-gradient(180deg,#a78bfa,#7c3aed); --active-grad:linear-gradient(90deg,rgba(79,70,229,.15),rgba(79,70,229,.04)); --icon-grad:linear-gradient(135deg,rgba(79,70,229,.16),rgba(168,85,247,.10)); --glow:0 6px 18px -4px rgba(79,70,229,.42); --card-hover:0 14px 34px -12px rgba(24,21,74,.18);
  --danger:#dc2626; --danger-soft:rgba(220,38,38,.08); --danger-line:rgba(220,38,38,.3); --danger-text:#b91c1c; --warn:#d97706; --warn-soft:rgba(217,119,6,.10); --warn-line:rgba(217,119,6,.3); --warn-text:#b45309; --info:#0284c7; --info-soft:rgba(2,132,199,.08); --info-line:rgba(2,132,199,.3); --info-text:#0369a1; --ok:#16a34a; --ok-soft:rgba(22,163,74,.10); --ok-text:#15803d; --muted-soft:rgba(100,116,139,.10);
}

/* ---------- AQUA WAVE ---------- */
body[data-theme="aqua"] {
  --bg:#edfafd; --bg2:#ddf4f8; --page-grad:radial-gradient(1100px 550px at 90% -10%,rgba(6,182,212,.10),transparent 60%),radial-gradient(800px 450px at -10% 110%,rgba(59,130,246,.08),transparent 55%);
  --panel:#fff; --panel2:#f5fdff; --panel-gradient:linear-gradient(180deg,#fff,#f2fbfd); --topbar:rgba(255,255,255,.86);
  --ink:#0a3340; --muted:#4d6f79; --muted2:#80a0a9; --placeholder:#91b0b8; --line:rgba(10,51,64,.11); --line-strong:#c8e1e7; --hover:rgba(6,182,212,.05); --nav-group:#82a7b0; --shadow-soft:rgba(10,51,64,.07); --overlay:rgba(3,30,38,.45); --input-bg:#fff;
  --ring:rgba(6,182,212,.22); --accent:#0891b2; --accent-2:#06b6d4; --accent-ink:#fff; --accent-soft:rgba(8,145,178,.10); --accent-soft2:rgba(59,130,246,.08); --accent-line:rgba(8,145,178,.30);
  --btn-grad:linear-gradient(180deg,#06b6d4,#0891b2); --btn-grad-2:linear-gradient(180deg,#22d3ee,#06b6d4); --active-grad:linear-gradient(90deg,rgba(6,182,212,.15),rgba(6,182,212,.04)); --icon-grad:linear-gradient(135deg,rgba(6,182,212,.16),rgba(59,130,246,.10)); --glow:0 6px 18px -4px rgba(6,182,212,.42); --card-hover:0 14px 34px -12px rgba(10,51,64,.18);
  --danger:#dc2626; --danger-soft:rgba(220,38,38,.08); --danger-line:rgba(220,38,38,.3); --danger-text:#b91c1c; --warn:#d97706; --warn-soft:rgba(217,119,6,.10); --warn-line:rgba(217,119,6,.3); --warn-text:#b45309; --info:#0284c7; --info-soft:rgba(2,132,199,.08); --info-line:rgba(2,132,199,.3); --info-text:#0369a1; --ok:#16a34a; --ok-soft:rgba(22,163,74,.10); --ok-text:#15803d; --muted-soft:rgba(100,116,139,.10);
}

/* ---------- AMBER GLOW ---------- */
body[data-theme="amber"] {
  --bg:#fffaf0; --bg2:#fff1cf; --page-grad:radial-gradient(1100px 550px at 90% -10%,rgba(245,158,11,.11),transparent 60%),radial-gradient(800px 450px at -10% 110%,rgba(234,88,12,.07),transparent 55%);
  --panel:#fff; --panel2:#fffdf7; --panel-gradient:linear-gradient(180deg,#fff,#fff9ec); --topbar:rgba(255,255,255,.88);
  --ink:#3d2607; --muted:#78603b; --muted2:#a58c68; --placeholder:#b29b79; --line:rgba(61,38,7,.11); --line-strong:#ead9b4; --hover:rgba(245,158,11,.05); --nav-group:#a98f69; --shadow-soft:rgba(61,38,7,.07); --overlay:rgba(45,25,3,.45); --input-bg:#fff;
  --ring:rgba(245,158,11,.22); --accent:#d97706; --accent-2:#f59e0b; --accent-ink:#fff; --accent-soft:rgba(217,119,6,.10); --accent-soft2:rgba(234,88,12,.07); --accent-line:rgba(217,119,6,.30);
  --btn-grad:linear-gradient(180deg,#f59e0b,#d97706); --btn-grad-2:linear-gradient(180deg,#fbbf24,#f59e0b); --active-grad:linear-gradient(90deg,rgba(245,158,11,.16),rgba(245,158,11,.04)); --icon-grad:linear-gradient(135deg,rgba(245,158,11,.17),rgba(234,88,12,.10)); --glow:0 6px 18px -4px rgba(245,158,11,.42); --card-hover:0 14px 34px -12px rgba(61,38,7,.18);
  --danger:#dc2626; --danger-soft:rgba(220,38,38,.08); --danger-line:rgba(220,38,38,.3); --danger-text:#b91c1c; --warn:#b45309; --warn-soft:rgba(180,83,9,.10); --warn-line:rgba(180,83,9,.3); --warn-text:#92400e; --info:#0284c7; --info-soft:rgba(2,132,199,.08); --info-line:rgba(2,132,199,.3); --info-text:#0369a1; --ok:#16a34a; --ok-soft:rgba(22,163,74,.10); --ok-text:#15803d; --muted-soft:rgba(100,116,139,.10);
}

/* ---------- ROSE POP ---------- */
body[data-theme="rose"] {
  --bg:#fff2f8; --bg2:#fce3ef; --page-grad:radial-gradient(1100px 550px at 90% -10%,rgba(236,72,153,.10),transparent 60%),radial-gradient(800px 450px at -10% 110%,rgba(139,92,246,.07),transparent 55%);
  --panel:#fff; --panel2:#fff7fb; --panel-gradient:linear-gradient(180deg,#fff,#fff4fa); --topbar:rgba(255,255,255,.87);
  --ink:#3b1028; --muted:#75536a; --muted2:#a17d94; --placeholder:#b18da3; --line:rgba(59,16,40,.11); --line-strong:#edccdc; --hover:rgba(236,72,153,.05); --nav-group:#a47e95; --shadow-soft:rgba(59,16,40,.07); --overlay:rgba(40,6,25,.45); --input-bg:#fff;
  --ring:rgba(236,72,153,.22); --accent:#db2777; --accent-2:#ec4899; --accent-ink:#fff; --accent-soft:rgba(219,39,119,.10); --accent-soft2:rgba(139,92,246,.08); --accent-line:rgba(219,39,119,.30);
  --btn-grad:linear-gradient(180deg,#ec4899,#db2777); --btn-grad-2:linear-gradient(180deg,#f472b6,#ec4899); --active-grad:linear-gradient(90deg,rgba(219,39,119,.15),rgba(219,39,119,.04)); --icon-grad:linear-gradient(135deg,rgba(219,39,119,.16),rgba(139,92,246,.10)); --glow:0 6px 18px -4px rgba(219,39,119,.42); --card-hover:0 14px 34px -12px rgba(59,16,40,.18);
  --danger:#b91c1c; --danger-soft:rgba(185,28,28,.08); --danger-line:rgba(185,28,28,.3); --danger-text:#991b1b; --warn:#d97706; --warn-soft:rgba(217,119,6,.10); --warn-line:rgba(217,119,6,.3); --warn-text:#b45309; --info:#0284c7; --info-soft:rgba(2,132,199,.08); --info-line:rgba(2,132,199,.3); --info-text:#0369a1; --ok:#16a34a; --ok-soft:rgba(22,163,74,.10); --ok-text:#15803d; --muted-soft:rgba(100,116,139,.10);
}