/* Color themes named after GLISS'N products. Each has a light and a dark version.
   Light rules apply unless dark mode is on (by choice or by device); dark rules are more specific so they win.
   "Classic" is studio.css with no data-palette set. */

/* 1. GLISS'N — hot pink, cherry and grape on cream, like the brand calendar */
:root[data-palette="glissn"] { --bg: #FFF1E6; --surface: #FFFFFF; --surface-2: #FFE6F0; --surface-3: #FFD6E6; --line: #F8D9E2; --line-2: #F0BED0;
  --accent: #FF2D6F; --accent-strong: #D1124F; --accent-soft: #FFD6E6; --accent-ink: #FFFFFF; --ink: #2D0F2E; --ink-2: #5E3A55; --muted: #93708A;
  --plum: #4E1A6E; --plum-2: #6A2B91; --plum-ink: #F8EAFF; --plum-muted: #C7A9E0; --side-pop: #FF6B9A; --hero: #FFD0E3; --pill-a: #4E1A6E; --pill-b: #FF2D6F; --alt-tint: #BFAEFF; }
@media (prefers-color-scheme: dark) { :root[data-palette="glissn"]:not([data-theme="light"]) { --bg: #1A0B1E; --surface: #241029; --surface-2: #2F1636; --surface-3: #3A1C42; --line: #3D2245; --line-2: #55305E;
  --accent: #FF4F87; --accent-strong: #FF8AB0; --accent-soft: #4A1430; --accent-ink: #1A0610; --ink: #FBEFF6; --ink-2: #E2C8DA; --muted: #B08FA8;
  --plum: #12061A; --plum-2: #3A1650; --hero: #3A1232; --alt-tint: #8B6CFF; } }
:root[data-palette="glissn"][data-theme="dark"] { --bg: #1A0B1E; --surface: #241029; --surface-2: #2F1636; --surface-3: #3A1C42; --line: #3D2245; --line-2: #55305E;
  --accent: #FF4F87; --accent-strong: #FF8AB0; --accent-soft: #4A1430; --accent-ink: #1A0610; --ink: #FBEFF6; --ink-2: #E2C8DA; --muted: #B08FA8;
  --plum: #12061A; --plum-2: #3A1650; --hero: #3A1232; --alt-tint: #8B6CFF; }

/* 2. Double Shot — espresso, caramel and cream neutrals */
:root[data-palette="doubleshot"] { --bg: #F3EDE6; --surface: #FFFCF8; --surface-2: #EDE3D8; --surface-3: #E3D5C6; --line: #E0D3C4; --line-2: #CDBBA7;
  --accent: #8A5A3C; --accent-strong: #6B4329; --accent-soft: #EAD9C9; --accent-ink: #FFFFFF; --ink: #2A1E17; --ink-2: #5A4636; --muted: #8C7663;
  --plum: #2F2119; --plum-2: #4A3528; --plum-ink: #F2E7DC; --plum-muted: #B49C88; --side-pop: #D7A574; --hero: #E8D8C6; --pill-a: #4A3528; --pill-b: #A8754F; --alt-tint: #C49A6C; }
@media (prefers-color-scheme: dark) { :root[data-palette="doubleshot"]:not([data-theme="light"]) { --bg: #15100D; --surface: #1E1814; --surface-2: #28201A; --surface-3: #322820; --line: #352A22; --line-2: #4A3B30;
  --accent: #D4A276; --accent-strong: #E8C29E; --accent-soft: #3A2B20; --accent-ink: #1B130E; --ink: #F4ECE4; --ink-2: #D6C6B6; --muted: #A69280;
  --plum: #0F0B09; --plum-2: #33261D; --hero: #2E2219; --alt-tint: #A07850; } }
:root[data-palette="doubleshot"][data-theme="dark"] { --bg: #15100D; --surface: #1E1814; --surface-2: #28201A; --surface-3: #322820; --line: #352A22; --line-2: #4A3B30;
  --accent: #D4A276; --accent-strong: #E8C29E; --accent-soft: #3A2B20; --accent-ink: #1B130E; --ink: #F4ECE4; --ink-2: #D6C6B6; --muted: #A69280;
  --plum: #0F0B09; --plum-2: #33261D; --hero: #2E2219; --alt-tint: #A07850; }

/* 3. So Deep — neon lime and neon pink on near-black */
:root[data-palette="sodeep"] { --bg: #F6F7F2; --surface: #FFFFFF; --surface-2: #F0F2E8; --surface-3: #E5E9D6; --line: #E3E6D8; --line-2: #CDD3B8;
  --accent: #FF1F8F; --accent-strong: #D10A72; --accent-soft: #FFD3EA; --accent-ink: #FFFFFF; --ink: #111111; --ink-2: #3A3A3A; --muted: #75776E;
  --plum: #0E0E10; --plum-2: #1F1F24; --plum-ink: #F4F4F0; --plum-muted: #9A9AA3; --side-pop: #C8FF2E; --hero: #E6FF9A; --pill-a: #0E0E10; --pill-b: #FF1F8F; --alt-tint: #C8FF2E; }
@media (prefers-color-scheme: dark) { :root[data-palette="sodeep"]:not([data-theme="light"]) { --bg: #09090B; --surface: #131316; --surface-2: #1B1B20; --surface-3: #24242A; --line: #2A2A31; --line-2: #3A3A43;
  --accent: #C8FF2E; --accent-strong: #DBFF6E; --accent-soft: #2A3310; --accent-ink: #0B0B0B; --ink: #F5F5F2; --ink-2: #CFCFCB; --muted: #8F8F98;
  --plum: #000000; --plum-2: #1C1C22; --side-pop: #FF2E9A; --hero: #232A0E; --pill-b: #FF2E9A; --alt-tint: #FF2E9A; } }
:root[data-palette="sodeep"][data-theme="dark"] { --bg: #09090B; --surface: #131316; --surface-2: #1B1B20; --surface-3: #24242A; --line: #2A2A31; --line-2: #3A3A43;
  --accent: #C8FF2E; --accent-strong: #DBFF6E; --accent-soft: #2A3310; --accent-ink: #0B0B0B; --ink: #F5F5F2; --ink-2: #CFCFCB; --muted: #8F8F98;
  --plum: #000000; --plum-2: #1C1C22; --side-pop: #FF2E9A; --hero: #232A0E; --pill-b: #FF2E9A; --alt-tint: #FF2E9A; }

/* 4. Pure Gliss — soft pinks and lavender, with a light pink sidebar */
:root[data-palette="puregliss"] { --bg: #FFF5F9; --surface: #FFFFFF; --surface-2: #FFEAF3; --surface-3: #FFDDEC; --line: #FBDCE8; --line-2: #F4C3D7;
  --accent: #E2468C; --accent-strong: #C42F72; --accent-soft: #FFE0EE; --accent-ink: #FFFFFF; --ink: #3D1B2E; --ink-2: #6E3F58; --muted: #A07489;
  --plum: #FCD9E8; --plum-2: #F8C2DA; --plum-ink: #6B2449; --plum-muted: #B07A93; --side-strong: #5A1A3C; --side-text: #7A3557; --plum-muted: #8E4A6C; --side-hover: rgba(255,255,255,.5); --side-line: rgba(107,36,73,.14); --side-pop: #E2468C;
  --hero: #FFE0EE; --pill-a: #E98FBF; --pill-b: #B98AEB; --alt-tint: #E3C4FF; }
@media (prefers-color-scheme: dark) { :root[data-palette="puregliss"]:not([data-theme="light"]) { --bg: #1C1118; --surface: #25161F; --surface-2: #2F1C28; --surface-3: #3A2231; --line: #3E2534; --line-2: #563447;
  --accent: #FF8CC2; --accent-strong: #FFB5D8; --accent-soft: #4A1F35; --accent-ink: #2A0E1C; --ink: #FDEFF6; --ink-2: #E8C9D9; --muted: #BB8FA6;
  --plum: #2A1622; --plum-2: #42213A; --plum-ink: #FBE3EF; --plum-muted: #C08AA6; --side-strong: #FFFFFF; --side-text: #F1CFE0; --side-hover: rgba(255,255,255,.06); --side-line: rgba(255,255,255,.1); --side-pop: #FF9CCB;
  --hero: #3E1A30; --pill-a: #A04F7E; --pill-b: #8A5FC2; --alt-tint: #B98AEB; } }
:root[data-palette="puregliss"][data-theme="dark"] { --bg: #1C1118; --surface: #25161F; --surface-2: #2F1C28; --surface-3: #3A2231; --line: #3E2534; --line-2: #563447;
  --accent: #FF8CC2; --accent-strong: #FFB5D8; --accent-soft: #4A1F35; --accent-ink: #2A0E1C; --ink: #FDEFF6; --ink-2: #E8C9D9; --muted: #BB8FA6;
  --plum: #2A1622; --plum-2: #42213A; --plum-ink: #FBE3EF; --plum-muted: #C08AA6; --side-strong: #FFFFFF; --side-text: #F1CFE0; --side-hover: rgba(255,255,255,.06); --side-line: rgba(255,255,255,.1); --side-pop: #FF9CCB;
  --hero: #3E1A30; --pill-a: #A04F7E; --pill-b: #8A5FC2; --alt-tint: #B98AEB; }

/* 5. Platinum Behavior — deep purple and lilac */
:root[data-palette="platinum"] { --bg: #F4F1FA; --surface: #FFFFFF; --surface-2: #ECE6F7; --surface-3: #E1D8F2; --line: #E2DAF0; --line-2: #CBBEE6;
  --accent: #6B3FA0; --accent-strong: #522C80; --accent-soft: #E4D9F5; --accent-ink: #FFFFFF; --ink: #20152F; --ink-2: #4A3B60; --muted: #7D6E96;
  --plum: #2A1846; --plum-2: #42296A; --plum-ink: #EFE7FF; --plum-muted: #A996CC; --side-pop: #C9B3FF; --hero: #E3D7F5; --pill-a: #2A1846; --pill-b: #8E6CC9; --alt-tint: #B39DFF; }
@media (prefers-color-scheme: dark) { :root[data-palette="platinum"]:not([data-theme="light"]) { --bg: #120E1A; --surface: #1A1526; --surface-2: #231C33; --surface-3: #2D2440; --line: #2E2542; --line-2: #43375E;
  --accent: #B9A0F2; --accent-strong: #D4C3FF; --accent-soft: #2E2347; --accent-ink: #160F22; --ink: #F3EEFF; --ink-2: #D2C7E8; --muted: #9D8FBA;
  --plum: #0B0812; --plum-2: #2E2148; --hero: #2A2140; --alt-tint: #7C5CD0; } }
:root[data-palette="platinum"][data-theme="dark"] { --bg: #120E1A; --surface: #1A1526; --surface-2: #231C33; --surface-3: #2D2440; --line: #2E2542; --line-2: #43375E;
  --accent: #B9A0F2; --accent-strong: #D4C3FF; --accent-soft: #2E2347; --accent-ink: #160F22; --ink: #F3EEFF; --ink-2: #D2C7E8; --muted: #9D8FBA;
  --plum: #0B0812; --plum-2: #2E2148; --hero: #2A2140; --alt-tint: #7C5CD0; }

/* 6. Blue Gloss — electric blue, cyan pop and a deep navy sidebar */
:root[data-palette="blue"] { --bg: #EEF6FF; --surface: #FFFFFF; --surface-2: #E3F0FF; --surface-3: #D3E7FF; --line: #D6E6F8; --line-2: #B9D3F0;
  --accent: #1E5FE6; --accent-strong: #0F45B8; --accent-soft: #D6E6FF; --accent-ink: #FFFFFF; --ink: #0B1B33; --ink-2: #2F4A6B; --muted: #55708F;
  --plum: #0B2A5B; --plum-2: #123A7A; --plum-ink: #EAF3FF; --plum-muted: #A9C2E6; --side-pop: #4DD9FF; --hero: #CDEBFF; --pill-a: #0B2A5B; --pill-b: #1E5FE6; --alt-tint: #7FE3FF; }
@media (prefers-color-scheme: dark) { :root[data-palette="blue"]:not([data-theme="light"]) { --bg: #07101F; --surface: #0D1A2E; --surface-2: #13233C; --surface-3: #1A2D4A; --line: #1E3150; --line-2: #2B4468;
  --accent: #4DA3FF; --accent-strong: #8CC4FF; --accent-soft: #12305A; --accent-ink: #04101F; --ink: #EAF3FF; --ink-2: #BCD2EE; --muted: #8FA8C8;
  --plum: #050C18; --plum-2: #102A52; --side-pop: #4DD9FF; --hero: #0F2A4D; --pill-b: #2E8BFF; --alt-tint: #2EC5FF; } }
:root[data-palette="blue"][data-theme="dark"] { --bg: #07101F; --surface: #0D1A2E; --surface-2: #13233C; --surface-3: #1A2D4A; --line: #1E3150; --line-2: #2B4468;
  --accent: #4DA3FF; --accent-strong: #8CC4FF; --accent-soft: #12305A; --accent-ink: #04101F; --ink: #EAF3FF; --ink-2: #BCD2EE; --muted: #8FA8C8;
  --plum: #050C18; --plum-2: #102A52; --side-pop: #4DD9FF; --hero: #0F2A4D; --pill-b: #2E8BFF; --alt-tint: #2EC5FF; }

/* Theme picker cards (My settings) */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.theme-card { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); text-align: left; color: var(--ink); }
.theme-card.on { border-color: var(--accent); }
.theme-card .sw { display: flex; height: 34px; border-radius: 8px; overflow: hidden; }
.theme-card .sw span { flex: 1; }
.theme-card b { font-size: 13px; }

/* ---------- Accessibility (WCAG 2.1 AA): readable text in every theme ----------
   Light themes: muted grey text and amber warnings were under the 4.5:1 contrast minimum, so they're
   mixed toward the main text color. These selectors are deliberately stronger than the palette rules. */
@media (prefers-color-scheme: light) { html:root:root:not([data-theme="dark"]) {
  --muted: color-mix(in srgb, var(--ink) 76%, var(--surface)); --warn: color-mix(in srgb, #B26A00 62%, var(--ink)); --ok: color-mix(in srgb, #18875A 80%, var(--ink)); --accent-fill: color-mix(in srgb, var(--accent) 80%, #000); --accent-text: color-mix(in srgb, var(--accent) 62%, var(--ink)); } }
html:root:root[data-theme="light"] {
  --muted: color-mix(in srgb, var(--ink) 76%, var(--surface)); --warn: color-mix(in srgb, #B26A00 62%, var(--ink)); --ok: color-mix(in srgb, #18875A 80%, var(--ink)); --accent-fill: color-mix(in srgb, var(--accent) 80%, #000); --accent-text: color-mix(in srgb, var(--accent) 62%, var(--ink)); }
/* colored labels (chips, type tags, post formats): the text leans toward the main text color so it stays readable on its tint */
.chip { color: color-mix(in srgb, var(--c) 55%, var(--ink)); }
.tb-chip.kind:not(.on) { color: color-mix(in srgb, var(--k) 55%, var(--ink)); }
.pc-fmt { color: color-mix(in srgb, var(--c) 50%, var(--ink)); }
.pc-st.review { color: var(--warn); }
/* days outside the month: quiet background, readable dates (no fading) */
.wk-day.out { opacity: 1; background: var(--surface-2); }
.wk-day.out .dl, .wk-day.out .dl .d { color: var(--muted); }
/* email options that are off: lighter, but still readable */
.email-row.dim { opacity: 1; }
.email-row.dim b, .email-row.dim .tiny { color: var(--muted); }
/* Keyboard users: a "Skip to content" link appears on the first Tab press */
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: 10px; background: var(--ink); color: var(--surface); font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 12px; }
.main:focus { outline: none; }
/* Controls that only show on hover also show when reached by keyboard */
.wk-day:focus-within .add, .plw-row:focus-within .plw-day .add { opacity: 1; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } .up-tile:hover { transform: none; } }
/* Group headings (Overdue, Today, Next 7 days…) lean toward the main text color so they read on light and dark */
.tb-gname { color: color-mix(in srgb, var(--g) 45%, var(--ink)); }
/* Pink accents in light themes: deeper behind white text, and deeper when used as text, so both reach 4.5:1 */
:root { --accent-fill: var(--accent); --accent-text: var(--accent); }
.btn.primary, .tb-chip.on, .badge:not(.soft), .count-pill, .today-pill { background-color: var(--accent-fill); border-color: var(--accent-fill); }
.linkbtn, .eyebrow.accent, .today-date, .accent-txt, .tw-tag { color: var(--accent-text); }
.photo-pick span, .pet.add, .pet.add .tiny, .rt-tag, .list-row .tag, .wkstat.hot .v, .cd-lab, .pt-ic, .idea-title:hover, .pl-item:hover { color: var(--accent-text); }
/* Initials badges: text leans further toward the main text color so every member color passes in light and dark */
.avatar:not(.photo) { color: color-mix(in srgb, var(--c) 55%, var(--ink)); }
.status { color: color-mix(in srgb, var(--c) 55%, var(--ink)); }
.side .brand .beta-pill { color: color-mix(in srgb, var(--side-pop) 55%, var(--side-strong, #fff)); }
/* "Beta" tag on Reports & sales (menu and page) */
.nav-beta { font-family: var(--f-accent); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; flex: none; align-self: center;
  color: color-mix(in srgb, var(--side-pop) 55%, var(--side-strong, #fff)); border: 1px solid color-mix(in srgb, var(--side-pop) 45%, transparent); }
.beta-note { align-items: center; }
.beta-note .nav-beta { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }