/* Shared theme palettes + toggle button, used on every page.
   Each page keeps defining its own light-mode :root variables exactly as
   before -- this file only adds [data-theme="X"] override blocks using the
   SAME variable names, so it works everywhere without touching each page's
   existing color rules. Six themes total: calm (default, no attribute --
   matches each page's plain :root), vivid, paper, spectrum, sunrise,
   midnight (dark). Ported from the You-The-Winner Hub project's theme
   system on 2026-07-25. Also overrides --gold/--gold-bg/--gold-border
   (added 2026-07-25 after the Midnight/dark theme left "My Plans" and other
   gold-highlight cards a fixed pale-yellow box regardless of theme --
   these three are common enough across pages, same shared-variable
   convention as the 11 core ones) so gold-highlight cards adapt too instead
   of staying a hardcoded light-mode yellow. See theme.js for the picker
   logic and localStorage memory. */

/* 2026-10-02 (per Marcelo): in the light themes the page background, the
   white cards and the grey chips were nearly the same shade, so chips and
   cards blended in. --bg and --surface2 are each one step darker (gentle,
   not high contrast); dark themes unchanged. */
:root[data-theme="vivid"] {
  --bg: #fcf5f5;
  --surface: #ffffff;
  --surface2: #fbe2e2;
  --surface3: #fbd9d9;
  --border: #f3c6c6;
  --text: #1a1414;
  --muted: #7a6060;
  --soft: #c98f8f;
  --accent: #cc0000;
  --accent2: #8f0000;
  --accent-light: #fde3e3;
  --gold: #ffb800;
  --gold-bg: #fff4d6;
  --gold-border: #ffd966;
}

/* 2026-09-06 revision, per Marcelo ("what's the difference between calm
   theme and paper? can they be a bit more different?"). Paper's old
   values (commented inline below) used almost the exact same teal-green
   accent family as Calm's own default (#2a7d6f) -- #1f6a5c/#16455c is
   barely a shade off -- so next to each other the two themes read as
   "the same theme, slightly paler," not two real choices. Paper now
   leans into an actual paper-and-ink look: warm cream/parchment
   background instead of stark white, and a neutral charcoal/graphite
   accent (no teal, no blue) instead of a near-copy of Calm's hue --
   genuinely monochrome-ish, the "plain, no-color" option next to Calm's
   green and Vivid's red.
   Old values (kept here for reference, not used):
   --bg:#ffffff; --surface2:#f7f7f5; --surface3:#eeeeeb; --border:#e2e2de;
   --accent:#1f6a5c; --accent2:#16455c; --accent-light:#edf5f2;
   --gold:#a3790f; --gold-bg:#fdfaf0; --gold-border:#e7d8a3; */
:root[data-theme="paper"] {
  --bg: #f4eee2;
  --surface: #fffdf8;
  --surface2: #ece4d4;
  --surface3: #e8dfcd;
  --border: #ddd2ba;
  --text: #2b2620;
  --muted: #756c5c;
  --soft: #a89d87;
  --accent: #4a4438;
  --accent2: #302b23;
  --accent-light: #ece5d5;
  --gold: #8a6d1f;
  --gold-bg: #f7efd8;
  --gold-border: #d9c48f;
}

:root[data-theme="spectrum"] {
  --bg: #f2f4f9;
  --surface: #ffffff;
  --surface2: #e7ebf4;
  --surface3: #eaeefa;
  --border: #dfe3ee;
  --text: #1f2430;
  --muted: #5f6676;
  --soft: #9aa0b0;
  --accent: #3b6fe0;
  --accent2: #2b3a55;
  --accent-light: #eaf0ff;
  --gold: #d9932e;
  --gold-bg: #fdf3e3;
  --gold-border: #f0d29e;
}

:root[data-theme="sunrise"] {
  --bg: #f6f0e4;
  --surface: #ffffff;
  --surface2: #fcecd3;
  --surface3: #fce8c8;
  --border: #eddcb5;
  --text: #2b2320;
  --muted: #7a6a55;
  --soft: #c9b48a;
  --accent: #e8963c;
  --accent2: #2a7d6f;
  --accent-light: #fdecd2;
  --gold: #e8963c;
  --gold-bg: #fff6e6;
  --gold-border: #f0cd8a;
}

:root[data-theme="midnight"] {
  --bg: #0f1720;
  --surface: #182430;
  --surface2: #1f2e3b;
  --surface3: #26394a;
  --border: #2f4254;
  --text: #eef3f6;
  --muted: #9fb3c2;
  --soft: #6d8494;
  /* 2026-09-04 fix, per Marcelo: --accent was #4fd8bc, a pale mint-green
     picked to pop as TEXT against the dark background (10.2:1 contrast
     there) -- but --accent is also used all over the app as a solid
     BUTTON/BADGE BACKGROUND with plain white text on top (e.g. active
     payroll-mode buttons, CTAs, progress fills), and white-on-#4fd8bc is
     only ~1.8:1 contrast, well under WCAG's 4.5:1 minimum -- exactly the
     "white font doesn't contrast well with light green" hard-to-read
     complaint. Darkened to #178a72 (still a clear teal/green, keeping the
     theme's identity): ~4.3:1 for white text on an --accent background,
     and still ~4.2:1 for --accent used as plain text against --bg, so
     both directions stay readable. --accent2 (blue) wasn't reported as an
     issue so it's untouched.
  */
  --accent: #178a72;
  --accent2: #7fb8e8;
  --accent-light: #1d3b38;
  --gold: #ffcf6b;
  --gold-bg: #2c2410;
  --gold-border: #5c4a1c;
}

/* Charcoal — warm minimalist dark theme (added 2026-09-18).
   Pure neutral graphite/charcoal background with warm glowing amber accents
   (zero blue, zero purple). High contrast and easy on the eyes. */
:root[data-theme="charcoal"] {
  --bg: #141416;
  --surface: #1c1c1f;
  --surface2: #25252a;
  --surface3: #2f2f35;
  --border: #3a3a44;
  --text: #f4f4f6;
  --muted: #9d9da8;
  --soft: #6e6e79;
  --accent: #d97706;
  --accent2: #f59e0b;
  --accent-light: #2b2214;
  --gold: #f59e0b;
  --gold-bg: #2b2010;
  --gold-border: #5e4618;
}

/* Winner — default theme since 2026-09-29, replacing Carbon.
   Mirrors the ytw-tools-marketing site (assets/v8.css): paper-mint
   background, marketing blue (#0c6fc6, the CTA gradient start) as the
   main accent, and marketing teal (#118b7b) as the second accent, so the
   app's accent->accent2 hero gradients read like the site's blue->teal
   CTA band. Both accents keep white text at ~4.3:1+ contrast. */
:root[data-theme="winner"] {
  /* 2026-10-10: one more contrast step (cards, chips, grid lines, muted text) */
  --bg: #e5eeea;
  --surface: #ffffff;
  --surface2: #d9e7e2;
  --surface3: #d7efe7;
  --border: #b9cfc9;
  --text: #10252a;
  --muted: #4e676a;
  --soft: #869ea1;
  --accent: #0c6fc6;
  --accent2: #118b7b;
  --accent-light: #e6f1fb;
  --gold: #b88a00;
  --gold-bg: #fff8df;
  --gold-border: #f2d36e;
}

/* Graphite — sleek slate-gray dark theme (added 2026-09-18).
   Uses the stylish deep graphite/slate header gradient (#1e2024 to #282a30)
   with crisp cool steel accents (#4b5563 / #64748b) and high contrast. */
:root[data-theme="graphite"] {
  --bg: #131416;
  --surface: #1a1c1e;
  --surface2: #23262a;
  --surface3: #2c3035;
  --border: #383e46;
  --text: #f3f4f6;
  --muted: #9aa2ac;
  --soft: #64748b;
  /* 2026-10-02 (per Marcelo): accents were #282a30/#1e2024, nearly the same
     as the surfaces, so bars, selected states and accent text vanished.
     Now a light steel blue-gray: readable as text on the dark surfaces and
     still OK under white text on buttons. */
  --accent: #7b8aa0;
  --accent2: #5b6b82;
  --accent-light: #263040;
  --gold: #f59e0b;
  --gold-bg: #282414;
  --gold-border: #564a1c;
}

.theme-toggle {
  position: fixed;
  top: 54px;
  right: 14px;
  z-index: 999;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  padding: 0;
  line-height: 1;
}
.theme-toggle:hover { background: var(--accent-light); transform: scale(1.06); }

/* Theme picker popover -- opens below the floating .theme-toggle button
   (fixed at top:54px;right:14px, 34x34) showing all 6 theme swatches. */
.theme-menu {
  position: fixed;
  top: 92px;
  right: 14px;
  z-index: 1000;
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #cfddd8);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  padding: 7px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 178px;
  opacity: 0;
  transform: translateY(-6px) scale(0.97);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.theme-menu.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.theme-menu-item {
  display: flex; align-items: center; gap: 9px;
  border: none; background: transparent; cursor: pointer;
  padding: 8px 9px; border-radius: 9px; text-align: left;
  font-family: 'Quicksand', sans-serif; font-size: 0.82rem; color: var(--text, #0f1f1c);
  width: 100%;
}
.theme-menu-item:hover { background: var(--surface2, #e8f0ed); }
.theme-menu-item.active { background: var(--accent-light, #e0eeea); font-weight: 700; }
.theme-swatch { display: flex; flex-shrink: 0; }
.theme-swatch span { width: 10px; height: 10px; border-radius: 50%; margin-left: -4px; border: 1px solid rgba(0,0,0,0.15); }
.theme-swatch span:first-child { margin-left: 0; }
.theme-menu-label { white-space: nowrap; }

@media print {
  .theme-toggle, .theme-menu { display: none !important; }
}

/* Shared scrollbar styling — applies everywhere theme.css is linked (every
   page, and this also reaches the My Day iframe embedded inside
   my-daily-tools.html, since myday.html links theme.css itself). A thin,
   muted scrollbar in the app's own palette instead of the browser/OS
   default reads as one consistent feel wherever the user scrolls, rather
   than a jarring default bar appearing only on longer pages or inside the
   embedded My Day iframe. Uses --border/--muted so it follows light/
   medium/dark theme automatically. Purely cosmetic — doesn't change any
   element's box size or scrolling behavior, so it's safe everywhere,
   including pages with position:fixed overlays. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }