/* ============================================================
   ai45.xyz — colour themes
   assets/theme.js sets <html data-palette="…" data-theme="dark|light">
   before first paint; these blocks override site.css tokens.
   Load this AFTER every other stylesheet so palettes win over
   page-level defaults (sat.css has its own light tokens).
   Midnight is the original look and lives in site.css :root.
   To add a theme: a block here + an entry in theme.js THEMES.
   ============================================================ */

html[data-palette] { color-scheme: dark; }
html[data-theme="light"][data-palette] { color-scheme: light; }

/* ---------- dark ---------- */
html[data-palette="obsidian"] {
  --navy: #0B0B0D; --navy-2: #121215; --slate: #26262C; --card: #17171A; --card-2: #1D1D21;
  --surface: #131316; --surface-2: #1A1A1E;
  --paper: #EDEDEF; --muted: rgba(237, 237, 239, 0.62); --faint: rgba(237, 237, 239, 0.38); --hairline: rgba(255, 255, 255, 0.08);
  --orange: #A78BFA; --amber: #C4B5FD; --sand: #C4B5FD; --accent-hi: #C4B5FD; --on-accent: #0B0B0D;
  --glass-rgb: 14, 14, 17; --glass2-rgb: 40, 40, 48; --well-rgb: 0, 0, 0; --scrim-rgb: 0, 0, 0;
  --hero-a: #111114; --hero-b: #2A2340;
}
html[data-palette="forest"] {
  --navy: #0B1512; --navy-2: #0F1C18; --slate: #1D3B33; --card: #12201B; --card-2: #172821;
  --surface: #101C18; --surface-2: #16261F;
  --paper: #E4EEE8; --muted: rgba(228, 238, 232, 0.64); --faint: rgba(228, 238, 232, 0.4); --hairline: rgba(255, 255, 255, 0.08);
  --orange: #34D399; --amber: #6EE7B7; --sand: #9AE6C3; --accent-hi: #6EE7B7; --on-accent: #062A1D;
  --glass-rgb: 12, 26, 21; --glass2-rgb: 30, 56, 47; --well-rgb: 4, 12, 9; --scrim-rgb: 2, 10, 7;
  --hero-a: #0E1E19; --hero-b: #1E4038;
}

/* ---------- light ---------- */
html[data-palette="paper"] {
  --navy: #F5F1EA; --navy-2: #EEE7DC; --slate: #E2D8C9; --card: #FFFFFF; --card-2: #FBF8F3;
  --surface: #FFFFFF; --surface-2: #FBF8F3;
  --paper: #1F2230; --muted: rgba(31, 34, 48, 0.68); --faint: rgba(31, 34, 48, 0.46); --hairline: rgba(31, 34, 48, 0.12);
  --orange: #D2622B; --amber: #DE7A22; --sand: #A4561B; --accent-hi: #E8834A; --on-accent: #FFFFFF;
  --fg-rgb: 31, 34, 48; --glass-rgb: 255, 252, 247; --glass2-rgb: 255, 253, 250; --well-rgb: 31, 34, 48; --well-k: 0.12; --scrim-rgb: 60, 52, 40;
  --hero-a: #FBF6EE; --hero-b: #EADFCF;
}
html[data-palette="cloud"] {
  --navy: #F1F4F9; --navy-2: #E8EDF5; --slate: #D7DFEC; --card: #FFFFFF; --card-2: #F7F9FC;
  --surface: #FFFFFF; --surface-2: #F7F9FC;
  --paper: #172033; --muted: rgba(23, 32, 51, 0.68); --faint: rgba(23, 32, 51, 0.46); --hairline: rgba(23, 32, 51, 0.12);
  --orange: #3E63DD; --amber: #5B7FEA; --sand: #3653B8; --accent-hi: #6C8FE8; --on-accent: #FFFFFF;
  --fg-rgb: 23, 32, 51; --glass-rgb: 250, 252, 255; --glass2-rgb: 252, 253, 255; --well-rgb: 23, 32, 51; --well-k: 0.12; --scrim-rgb: 30, 40, 60;
  --hero-a: #F7F9FD; --hero-b: #DCE5F3;
}
html[data-palette="sage"] {
  --navy: #EFF3EE; --navy-2: #E5ECE3; --slate: #D3DFD0; --card: #FFFFFF; --card-2: #F6F9F5;
  --surface: #FFFFFF; --surface-2: #F6F9F5;
  --paper: #1B2620; --muted: rgba(27, 38, 32, 0.68); --faint: rgba(27, 38, 32, 0.46); --hairline: rgba(27, 38, 32, 0.12);
  --orange: #2E8B57; --amber: #3BA36A; --sand: #2C7049; --accent-hi: #4CB07A; --on-accent: #FFFFFF;
  --fg-rgb: 27, 38, 32; --glass-rgb: 250, 253, 249; --glass2-rgb: 252, 254, 251; --well-rgb: 27, 38, 32; --well-k: 0.12; --scrim-rgb: 30, 45, 36;
  --hero-a: #F6FAF4; --hero-b: #D9E6D5;
}

/* light themes: soften big shadows, keep model colours readable as text */
html[data-theme="light"][data-palette] {
  --c-pplx: #1F8A97; --c-gpt: #0C8A6B;
}
html[data-theme="light"][data-palette] .wid,
html[data-theme="light"][data-palette] .kpi,
html[data-theme="light"][data-palette] .hero { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 18px 40px -28px rgba(30, 30, 50, 0.35); }
html[data-theme="light"][data-palette] .dock,
html[data-theme="light"][data-palette] .mega,
html[data-theme="light"][data-palette] .drawer__pane { box-shadow: 0 16px 40px -12px rgba(30, 30, 50, 0.25); }

/* a short, colour-only crossfade when switching themes */
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
  transition: background-color .45s ease, border-color .45s ease, color .45s ease, fill .45s ease, stroke .45s ease !important;
}

/* ---------- picker (in the menu drawer) ---------- */
.themes { margin-top: 22px; }
.themes h3 { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin: 0 0 10px 10px; }
.themes__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.themes__row + .themes__row { margin-top: 8px; }
.sw { display: flex; flex-direction: column; gap: 7px; padding: 7px; border-radius: 16px; border: 1px solid rgba(var(--fg-rgb), 0.1); background: rgba(var(--fg-rgb), 0.03); text-align: left; transition: border-color .2s, transform .25s var(--ease); }
.sw:hover { transform: translateY(-2px); border-color: rgba(var(--fg-rgb), 0.25); }
.sw.is-on { border-color: var(--orange); box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 22%, transparent); }
.sw__prev { position: relative; height: 46px; border-radius: 10px; overflow: hidden; background: var(--b); border: 1px solid rgba(128, 128, 128, 0.18); }
.sw__prev i { position: absolute; left: 8px; right: 18px; top: 8px; height: 12px; border-radius: 5px; background: var(--s); }
.sw__prev i + i { top: 24px; right: 30px; height: 6px; opacity: .6; }
.sw__prev b { position: absolute; right: 7px; bottom: 7px; width: 14px; height: 14px; border-radius: 50%; background: var(--a); }
.sw__n { padding: 0 3px 1px; font-size: 12px; font-weight: 600; color: var(--paper); display: flex; justify-content: space-between; align-items: center; }
.sw__n svg { width: 13px; height: 13px; fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.sw.is-on .sw__n svg { opacity: 1; }

/* light themes: colours that were tuned for dark backgrounds */
html[data-theme="light"][data-palette] .task.is-over .task__due,
html[data-theme="light"][data-palette] .task__x:hover,
html[data-theme="light"][data-palette] .q__err,
html[data-theme="light"][data-palette] .form-error { color: #B23A48; }
html[data-theme="light"][data-palette] .task.is-over .task__due { background: rgba(178, 58, 72, 0.1); }
html[data-theme="light"][data-palette] .nv-soon,
html[data-theme="light"][data-palette] .soon-badge { color: #1C7480; }
html[data-theme="light"][data-palette] .heat i[data-l="4"] { box-shadow: none; }
html[data-theme="light"][data-palette] .page-hero__frame { box-shadow: 0 24px 60px -30px rgba(30, 30, 50, 0.3); }