/* ======================================================
   themes-skins.css — CLEAN SKIN SYSTEM
   Variable-only. Zero selectors. Zero hover rules.
   Compatible with:
     - template.css
     - header.css
     - calendar.css
   ====================================================== */

body[data-skin]{
  --hdr-bg: var(--panel-bg);
  --hdr-fg: var(--text);
  --hdr-border: var(--border);

  --hdr-ctrl-bg: var(--panel-bg);
  --hdr-ctrl-fg: var(--text);
  --hdr-ctrl-border: var(--border);

  --cal-bg: var(--bg-body);

  /* semantic surface / contrast tokens */
  --surface-1: color-mix(in srgb, var(--panel-bg) 94%, var(--bg-body));
  --surface-2: color-mix(in srgb, var(--panel-bg) 84%, var(--bg-body));
  --surface-3: color-mix(in srgb, var(--panel-bg) 76%, transparent);
  --text-1: var(--text);
  --text-2: color-mix(in srgb, var(--text) 72%, transparent);
  --text-3: color-mix(in srgb, var(--text) 50%, transparent);

  /* canonical field tokens */
  --field-bg: color-mix(in srgb, var(--panel-bg) 94%, var(--bg-body));
  --field-fg: var(--text);
  --field-border: color-mix(in srgb, var(--border) 84%, var(--accent) 16%);
  --field-placeholder: color-mix(in srgb, var(--text) 46%, transparent);
  --field-focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);

  /* strategy shell / dropdown tokens */
  --strategy-shell-bg: color-mix(in srgb, var(--panel-bg) 88%, var(--bg-body));
  --strategy-shell-surface: color-mix(in srgb, var(--panel-bg) 94%, var(--bg-body));
  --strategy-shell-surface-2: color-mix(in srgb, var(--panel-bg) 82%, var(--bg-body));
  --strategy-shell-border: color-mix(in srgb, var(--border) 86%, var(--accent) 14%);
  --strategy-shell-text: var(--text);
  --strategy-shell-subtle: color-mix(in srgb, var(--text) 66%, transparent);
  --strategy-shell-item-bg: color-mix(in srgb, var(--panel-bg) 90%, transparent);
  --strategy-shell-item-hover-bg: color-mix(in srgb, var(--accent) 10%, var(--panel-bg));
  --strategy-shell-badge-bg: color-mix(in srgb, var(--accent) 14%, transparent);
  --strategy-shell-badge-fg: var(--text);
  --strategy-shell-play-bg: color-mix(in srgb, var(--accent) 16%, var(--panel-bg));
  --strategy-shell-play-fg: var(--text);
  --strategy-shell-chip-bg: color-mix(in srgb, var(--accent) 12%, transparent);
  --strategy-shell-shadow: 0 18px 34px color-mix(in srgb, #000 22%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
}

/* ======================================================
   THERAPY — Lavender Calm
   ====================================================== */

body.light[data-skin="therapy"]{
  --accent: #7c6ee6;

  --panel-bg: #ffffff;
  --bg-body:  #f7f8fd;
  --text:     #1b1f2a;
  --border:   rgba(0,0,0,.10);

  --hdr-bg:     #f1efff;
  --hdr-fg:     #1b1f2a;
  --hdr-border: rgba(124,110,230,.22);
}

body.dark[data-skin="therapy"]{
  --accent: #9a8cff;

  --panel-bg: #0b132c;
  --bg-body:  #080e22;
  --text:     #f4f6ff;
  --border:   rgba(255,255,255,.14);

  --hdr-bg:     #10163a;
  --hdr-fg:     #f4f6ff;
  --hdr-border: rgba(154,140,255,.28);
}

/* ======================================================
   NURSERY — Mint Calm
   ====================================================== */

body.light[data-skin="nursery"]{
  --accent: #29c6b0;

  --panel-bg: #ffffff;
  --bg-body:  #f2fcfa;
  --text:     #10201d;
  --border:   rgba(0,0,0,.10);

  --hdr-bg:     #e8fbf7;
  --hdr-fg:     #10201d;
  --hdr-border: rgba(41,198,176,.24);
}

body.dark[data-skin="nursery"]{
  --accent: #49e3cf;

  --panel-bg: #0b1f1d;
  --bg-body:  #071615;
  --text:     #ecfffb;
  --border:   rgba(255,255,255,.14);

  --hdr-bg:     #0e2b27;
  --hdr-fg:     #ecfffb;
  --hdr-border: rgba(73,227,207,.26);
}

/* ======================================================
   TUTORING — Sky Focus
   ====================================================== */

body.light[data-skin="tutoring"]{
  --accent: #4b8bff;

  --panel-bg: #ffffff;
  --bg-body:  #f4f8ff;
  --text:     #111827;
  --border:   rgba(0,0,0,.10);

  --hdr-bg:     #eaf1ff;
  --hdr-fg:     #111827;
  --hdr-border: rgba(75,139,255,.22);
}

body.dark[data-skin="tutoring"]{
  --accent: #7fb0ff;

  --panel-bg: #08172d;
  --bg-body:  #050f1f;
  --text:     #eef4ff;
  --border:   rgba(255,255,255,.14);

  --hdr-bg:     #0b2045;
  --hdr-fg:     #eef4ff;
  --hdr-border: rgba(127,176,255,.28);
}

/* ======================================================
   SALON — Rose Soft Luxury
   ====================================================== */

body.light[data-skin="salon"]{
  --accent: #ec6aa3;

  --panel-bg: #ffffff;
  --bg-body:  #fff6fa;
  --text:     #1b1020;
  --border:   rgba(0,0,0,.10);

  --hdr-bg:     #fff0f6;
  --hdr-fg:     #1b1020;
  --hdr-border: rgba(236,106,163,.22);
}

body.dark[data-skin="salon"]{
  --accent: #f5a3c3;

  --panel-bg: #1a0e16;
  --bg-body:  #12080f;
  --text:     #fff4f9;
  --border:   rgba(255,255,255,.14);

  --hdr-bg:     #2a1220;
  --hdr-fg:     #fff4f9;
  --hdr-border: rgba(245,163,195,.26);
}


/* ======================================================
   MINT — Pastel Fresh
   ====================================================== */

body.light[data-skin="mint"]{
  --accent: #53d6bd;

  --panel-bg: #ffffff;
  --bg-body:  #f4fcfa;
  --text:     #10211d;
  --border:   rgba(0,0,0,.10);

  --hdr-bg:     #edf9f6;
  --hdr-fg:     #10211d;
  --hdr-border: rgba(83,214,189,.24);
}

body.dark[data-skin="mint"]{
  --accent: #6ee7d2;

  --panel-bg: #0b1d1b;
  --bg-body:  #071514;
  --text:     #ecfffb;
  --border:   rgba(255,255,255,.14);

  --hdr-bg:     #0d2a26;
  --hdr-fg:     #ecfffb;
  --hdr-border: rgba(110,231,210,.26);
}

/* ======================================================
   BLUSH — Pastel Rose
   ====================================================== */

body.light[data-skin="blush"]{
  --accent: #f08ab4;

  --panel-bg: #ffffff;
  --bg-body:  #fff7fa;
  --text:     #211119;
  --border:   rgba(0,0,0,.10);

  --hdr-bg:     #fff2f7;
  --hdr-fg:     #211119;
  --hdr-border: rgba(240,138,180,.22);
}

body.dark[data-skin="blush"]{
  --accent: #f5aac9;

  --panel-bg: #1a0f15;
  --bg-body:  #12090f;
  --text:     #fff5f9;
  --border:   rgba(255,255,255,.14);

  --hdr-bg:     #29141e;
  --hdr-fg:     #fff5f9;
  --hdr-border: rgba(245,170,201,.26);
}

/* ======================================================
   INK — Minimal Professional
   ====================================================== */

body.light[data-skin="ink"]{
  --accent: #111827;

  --panel-bg: #ffffff;
  --bg-body:  #f6f7fb;
  --text:     #111827;
  --border:   rgba(0,0,0,.12);

  --hdr-bg:     #0c0f14;
  --hdr-fg:     #f5f7fb;
  --hdr-border: rgba(255,255,255,.18);

  --hdr-ctrl-bg: rgba(255,255,255,.96);
  --hdr-ctrl-fg: #0f172a;
  --hdr-ctrl-border: rgba(255,255,255,.78);
  --hdr-popover-bg: rgba(15,23,42,.98);
  --hdr-popover-fg: #f8fafc;
}

body.dark[data-skin="ink"]{
  --accent: #d1d5db;

  --panel-bg: #070b12;
  --bg-body:  #05080e;
  --text:     #f5f7fb;
  --border:   rgba(255,255,255,.14);

  --hdr-bg:     #020409;
  --hdr-fg:     #f5f7fb;
  --hdr-border: rgba(255,255,255,.20);
}

/* ======================================================
   NAVY — Executive Calm
   ====================================================== */

body.light[data-skin="navy"]{
  --accent: #1d4ed8;

  --panel-bg: #ffffff;
  --bg-body:  #f5f7fd;
  --text:     #0f172a;
  --border:   rgba(0,0,0,.10);

  --hdr-bg:     #0b1a3a;
  --hdr-fg:     #eef4ff;
  --hdr-border: rgba(255,255,255,.18);

  --hdr-ctrl-bg: rgba(255,255,255,.96);
  --hdr-ctrl-fg: #0f172a;
  --hdr-ctrl-border: rgba(255,255,255,.78);
  --hdr-popover-bg: rgba(15,23,42,.98);
  --hdr-popover-fg: #f8fafc;
}

body.dark[data-skin="navy"]{
  --accent: #6ea0ff;

  --panel-bg: #071126;
  --bg-body:  #050b18;
  --text:     #eef4ff;
  --border:   rgba(255,255,255,.14);

  --hdr-bg:     #040b1a;
  --hdr-fg:     #eef4ff;
  --hdr-border: rgba(255,255,255,.22);
}

/* ======================================================
   AUTO MODE CONTRAST (SKIN-AWARE)
   Do not force one foreground color for every light skin.
   Some light skins (navy/ink) deliberately use a dark header.
   ====================================================== */
body.light[data-skin="therapy"][data-header-color="auto"],
body.light[data-skin="nursery"][data-header-color="auto"],
body.light[data-skin="tutoring"][data-header-color="auto"],
body.light[data-skin="salon"][data-header-color="auto"],
body.light[data-skin="mint"][data-header-color="auto"],
body.light[data-skin="blush"][data-header-color="auto"]{
  --hdr-fg: var(--text) !important;
  --hdr-ctrl-bg: rgba(255,255,255,.92) !important;
  --hdr-ctrl-fg: #111827 !important;
  --hdr-ctrl-border: rgba(0,0,0,.12) !important;
  --hdr-popover-bg: #ffffff !important;
  --hdr-popover-fg: #111827 !important;
}

body.light[data-skin="ink"][data-header-color="auto"],
body.light[data-skin="navy"][data-header-color="auto"]{
  --hdr-fg: #eef4ff !important;
  --hdr-ctrl-bg: rgba(255,255,255,.96) !important;
  --hdr-ctrl-fg: #0f172a !important;
  --hdr-ctrl-border: rgba(255,255,255,.78) !important;
  --hdr-popover-bg: rgba(15,23,42,.98) !important;
  --hdr-popover-fg: #f8fafc !important;
}

body.dark[data-skin][data-header-color="auto"]{
  --hdr-fg: #f5f9ff !important;
  --hdr-ctrl-bg: rgba(255,255,255,.10) !important;
  --hdr-ctrl-fg: #f5f9ff !important;
  --hdr-ctrl-border: rgba(255,255,255,.18) !important;
  --hdr-popover-bg: rgba(15,23,42,.98) !important;
  --hdr-popover-fg: #f8fafc !important;
}

/* ======================================================
   UI COLOR OVERRIDES (GLOBAL, LAST-WIN)
   Fix: header color selections must override skins regardless of CSS load order.
   Driven by: body[data-header-color="..."]
   ====================================================== */
body[data-header-color="light"]{
  --hdr-bg: #ffffff !important;
  --hdr-fg: #111827 !important;
  --hdr-border: rgba(0,0,0,.15) !important;

  --hdr-ctrl-bg: #ffffff !important;
  --hdr-ctrl-fg: #111827 !important;
  --hdr-ctrl-border: rgba(0,0,0,.15) !important;
}

body[data-header-color="dark"]{
  --hdr-bg: #0f172a !important;
  --hdr-fg: #f8fafc !important;
  --hdr-border: rgba(255,255,255,.12) !important;

  --hdr-ctrl-bg: #0f172a !important;
  --hdr-ctrl-fg: #f8fafc !important;
  --hdr-ctrl-border: rgba(255,255,255,.12) !important;
}

body[data-header-color="electric"]{
  --hdr-bg: linear-gradient(135deg,#2563eb,#38bdf8) !important;
  --hdr-fg: #ffffff !important;
  --hdr-border: rgba(255,255,255,.22) !important;

  --hdr-ctrl-bg: rgba(255,255,255,.10) !important;
  --hdr-ctrl-fg: #ffffff !important;
  --hdr-ctrl-border: rgba(255,255,255,.25) !important;
}

body[data-header-color="emerald"]{
  --hdr-bg: linear-gradient(135deg,#059669,#34d399) !important;
  --hdr-fg: #ffffff !important;
  --hdr-border: rgba(255,255,255,.22) !important;

  --hdr-ctrl-bg: rgba(255,255,255,.10) !important;
  --hdr-ctrl-fg: #ffffff !important;
  --hdr-ctrl-border: rgba(255,255,255,.25) !important;
}

/* Auto = skin driven (no overrides) */
body[data-header-color="auto"]{
  /* intentionally empty */
}
/* ======================================================
   EXTRA HEADER COLORS
   ====================================================== */

body[data-header-color="royal"]{
  --hdr-bg: linear-gradient(135deg,#6d28d9,#8b5cf6) !important;
  --hdr-fg: #ffffff !important;
  --hdr-border: rgba(255,255,255,.22) !important;

  --hdr-ctrl-bg: rgba(255,255,255,.10) !important;
  --hdr-ctrl-fg: #ffffff !important;
  --hdr-ctrl-border: rgba(255,255,255,.25) !important;
}

body[data-header-color="sunset"]{
  --hdr-bg: linear-gradient(135deg,#f97316,#fb7185) !important;
  --hdr-fg: #ffffff !important;
  --hdr-border: rgba(255,255,255,.22) !important;

  --hdr-ctrl-bg: rgba(255,255,255,.10) !important;
  --hdr-ctrl-fg: #ffffff !important;
  --hdr-ctrl-border: rgba(255,255,255,.25) !important;
}

body[data-header-color="ocean"]{
  --hdr-bg: linear-gradient(135deg,#0f766e,#06b6d4) !important;
  --hdr-fg: #ffffff !important;
  --hdr-border: rgba(255,255,255,.22) !important;

  --hdr-ctrl-bg: rgba(255,255,255,.10) !important;
  --hdr-ctrl-fg: #ffffff !important;
  --hdr-ctrl-border: rgba(255,255,255,.25) !important;
}

body[data-header-color="rose"]{
  --hdr-bg: linear-gradient(135deg,#9f1239,#e11d48) !important;
  --hdr-fg: #ffffff !important;
  --hdr-border: rgba(255,255,255,.22) !important;

  --hdr-ctrl-bg: rgba(255,255,255,.10) !important;
  --hdr-ctrl-fg: #ffffff !important;
  --hdr-ctrl-border: rgba(255,255,255,.25) !important;
}

body[data-header-color="graphite"]{
  --hdr-bg: linear-gradient(135deg,#111827,#374151) !important;
  --hdr-fg: #f9fafb !important;
  --hdr-border: rgba(255,255,255,.14) !important;

  --hdr-ctrl-bg: rgba(255,255,255,.08) !important;
  --hdr-ctrl-fg: #f9fafb !important;
  --hdr-ctrl-border: rgba(255,255,255,.16) !important;
}

body[data-header-color="lavender"]{
  --hdr-bg: linear-gradient(135deg,#8b6bd9,#b59cff) !important;
  --hdr-fg: #ffffff !important;
  --hdr-border: rgba(255,255,255,.22) !important;

  --hdr-ctrl-bg: rgba(255,255,255,.10) !important;
  --hdr-ctrl-fg: #ffffff !important;
  --hdr-ctrl-border: rgba(255,255,255,.25) !important;
}

body[data-header-color="mint"]{
  --hdr-bg: linear-gradient(135deg,#44c7b6,#0f766e) !important;
  --hdr-fg: #ffffff !important;
  --hdr-border: rgba(255,255,255,.22) !important;

  --hdr-ctrl-bg: rgba(255,255,255,.10) !important;
  --hdr-ctrl-fg: #ffffff !important;
  --hdr-ctrl-border: rgba(255,255,255,.25) !important;
}

body[data-header-color="sky"]{
  --hdr-bg: linear-gradient(135deg,#1d4ed8,#0b3a8f) !important;
  --hdr-fg: #ffffff !important;
  --hdr-border: rgba(255,255,255,.22) !important;

  --hdr-ctrl-bg: rgba(255,255,255,.10) !important;
  --hdr-ctrl-fg: #ffffff !important;
  --hdr-ctrl-border: rgba(255,255,255,.25) !important;
}

body[data-header-color="blush"]{
  --hdr-bg: linear-gradient(135deg,#e35d93,#7a1f5c) !important;
  --hdr-fg: #ffffff !important;
  --hdr-border: rgba(255,255,255,.22) !important;

  --hdr-ctrl-bg: rgba(255,255,255,.10) !important;
  --hdr-ctrl-fg: #ffffff !important;
  --hdr-ctrl-border: rgba(255,255,255,.25) !important;
}

body[data-header-color="ink"]{
  --hdr-bg: linear-gradient(135deg,#2b3148,#0f172a) !important;
  --hdr-fg: #f9fafb !important;
  --hdr-border: rgba(255,255,255,.14) !important;

  --hdr-ctrl-bg: rgba(255,255,255,.08) !important;
  --hdr-ctrl-fg: #f9fafb !important;
  --hdr-ctrl-border: rgba(255,255,255,.16) !important;
}

body[data-header-color="navy"]{
  --hdr-bg: linear-gradient(135deg,#0b1f4d,#020b22) !important;
  --hdr-fg: #eef4ff !important;
  --hdr-border: rgba(255,255,255,.18) !important;

  --hdr-ctrl-bg: rgba(255,255,255,.08) !important;
  --hdr-ctrl-fg: #eef4ff !important;
  --hdr-ctrl-border: rgba(255,255,255,.16) !important;
}

body[data-header-color="white"]{
  --hdr-bg: linear-gradient(135deg,#ffffff,#ece9f1) !important;
  --hdr-fg: #111827 !important;
  --hdr-border: rgba(0,0,0,.12) !important;

  --hdr-ctrl-bg: rgba(255,255,255,.88) !important;
  --hdr-ctrl-fg: #111827 !important;
  --hdr-ctrl-border: rgba(0,0,0,.12) !important;
}

/* ======================================================
   EXTRA GRID COLOR MODES
   ====================================================== */

body[data-grid-color="soft"]{
  --cal-grid-bg: #1c2230;
  --cal-grid-fg: #e8eefc;
  --grid-border: rgba(196,205,228,.14);
  --header-border: rgba(196,205,228,.22);
}

body[data-grid-color="balanced"]{
  --cal-grid-bg: #1a2130;
  --cal-grid-fg: #eef3ff;
  --grid-border: rgba(186,198,226,.20);
  --header-border: rgba(186,198,226,.30);
}

body[data-grid-color="bold"]{
  --cal-grid-bg: #161d2b;
  --cal-grid-fg: #f3f7ff;
  --grid-border: rgba(205,216,240,.28);
  --header-border: rgba(205,216,240,.40);
}

body[data-grid-color="accent"]{
  --cal-grid-bg: color-mix(in srgb, var(--accent) 10%, #141b28);
  --cal-grid-fg: #f3f7ff;
  --grid-border: color-mix(in srgb, var(--accent) 32%, rgba(255,255,255,.10));
  --header-border: color-mix(in srgb, var(--accent) 46%, rgba(255,255,255,.14));
}

body[data-grid-color="lavender"]{
  --cal-grid-bg: #26233a;
  --cal-grid-fg: #f0eaff;
  --grid-border: rgba(205,190,255,.18);
  --header-border: rgba(205,190,255,.28);
}

body[data-grid-color="mint"]{
  --cal-grid-bg: #172a28;
  --cal-grid-fg: #eafff9;
  --grid-border: rgba(170,236,220,.18);
  --header-border: rgba(170,236,220,.28);
}

body[data-grid-color="sky"]{
  --cal-grid-bg: #16263a;
  --cal-grid-fg: #eaf4ff;
  --grid-border: rgba(168,205,255,.18);
  --header-border: rgba(168,205,255,.28);
}

body[data-grid-color="blush"]{
  --cal-grid-bg: #312234;
  --cal-grid-fg: #fff0f7;
  --grid-border: rgba(245,190,220,.18);
  --header-border: rgba(245,190,220,.28);
}

body[data-grid-color="ink"]{
  --cal-grid-bg: #171c27;
  --cal-grid-fg: #eef2fb;
  --grid-border: rgba(183,194,217,.16);
  --header-border: rgba(183,194,217,.26);
}

body[data-grid-color="navy"]{
  --cal-grid-bg: #13203a;
  --cal-grid-fg: #edf4ff;
  --grid-border: rgba(176,200,236,.18);
  --header-border: rgba(176,200,236,.28);
}

body[data-grid-color="white"]{
  --cal-grid-bg: #ffffff;
  --cal-grid-fg: #111827;
  --grid-border: rgba(148,163,184,.20);
  --header-border: rgba(148,163,184,.32);
}

/* 🔥 Kill ghost registry selectors */
.select-box,
.registry-select,
.bulk-select{
  display:none !important;
}