/* CodeFlow AI moods. Chosen in the header and remembered per browser (data-theme on <html>).
   "light" is the default in codeflow.css; without a choice the page follows the system dark setting. */

:root[data-theme="dark"] {
  --bg: #0a0918; --bg-2: #100e24; --surface: #15132c; --surface-2: #1a1834;
  --ink: #f3f1fb; --ink-2: #d4cfe8; --muted: #9b95b5; --line: #26233f; --line-2: #312d50;
  --accent: #7c6bff; --accent-2: #9384ff; --accent-soft: #1f1b45; --ring: rgba(124, 107, 255, .45);
  --glow-1: rgba(139, 61, 255, .28); --glow-2: rgba(25, 167, 255, .20);
  --shadow: 0 16px 40px -18px rgba(0, 0, 0, .6); --shadow-lg: 0 40px 100px -40px rgba(80, 60, 255, .5);
  color-scheme: dark;
}

/* black & white */
:root[data-theme="mono"] {
  --bg: #ffffff; --bg-2: #f3f3f3; --surface: #ffffff; --surface-2: #f8f8f8;
  --ink: #0a0a0a; --ink-2: #262626; --muted: #666666; --line: #e5e5e5; --line-2: #d1d1d1;
  --accent: #0a0a0a; --accent-2: #000000; --accent-soft: #eeeeee; --ring: rgba(0, 0, 0, .22);
  --brand: linear-gradient(120deg, #000000 0%, #2b2b2b 100%); --on-brand: #ffffff; --brand-shadow: #000000;
  --glow-1: rgba(0, 0, 0, .05); --glow-2: rgba(0, 0, 0, .04);
  --final-bg: #0a0a0a; --final-ink: #ffffff; --final-btn-ink: #0a0a0a;
  --logo-filter: grayscale(1) contrast(1.1);
  --shadow: 0 12px 32px -16px rgba(0, 0, 0, .22); --shadow-lg: 0 30px 70px -36px rgba(0, 0, 0, .35);
  color-scheme: light;
}

/* green & dark */
:root[data-theme="forest"] {
  --bg: #07130e; --bg-2: #0b1c15; --surface: #0f231a; --surface-2: #132b20;
  --ink: #e9f5ee; --ink-2: #c4dccd; --muted: #8ca898; --line: #1c3a2c; --line-2: #24493a;
  --accent: #34d399; --accent-2: #6ee7b7; --accent-soft: #113524; --ring: rgba(52, 211, 153, .4);
  --brand: linear-gradient(120deg, #16a34a 0%, #10b981 52%, #22d3ee 100%); --on-brand: #ffffff; --brand-shadow: #10b981;
  --glow-1: rgba(16, 185, 129, .22); --glow-2: rgba(34, 211, 238, .12);
  --final-bg: radial-gradient(60% 120% at 20% 0%, #16a34a 0%, transparent 60%),
              radial-gradient(60% 120% at 90% 100%, #0e7490 0%, transparent 60%), #04110b;
  --final-ink: #ffffff; --final-btn-ink: #04110b;
  --logo-filter: hue-rotate(205deg) saturate(1.1);
  --shadow: 0 16px 40px -18px rgba(0, 0, 0, .6); --shadow-lg: 0 40px 100px -40px rgba(16, 185, 129, .45);
  color-scheme: dark;
}

/* warm cream & terracotta, serif display (Claude-inspired) */
:root[data-theme="clay"] {
  --bg: #f5f2ea; --bg-2: #ede8dc; --surface: #fbfaf6; --surface-2: #f7f4ec;
  --ink: #1f1e1d; --ink-2: #3d3a35; --muted: #73706a; --line: #e5dfd2; --line-2: #d8d0bf;
  --accent: #c2603e; --accent-2: #a9512f; --accent-soft: #f3e2d8; --ring: rgba(194, 96, 62, .3);
  --brand: linear-gradient(120deg, #d97757 0%, #c96442 55%, #b0563a 100%); --on-brand: #ffffff; --brand-shadow: #c96442;
  --glow-1: rgba(217, 119, 87, .14); --glow-2: rgba(201, 160, 120, .12);
  --final-bg: radial-gradient(60% 120% at 20% 0%, #c96442 0%, transparent 60%), #2a211c;
  --final-ink: #fbf7f0; --final-btn-ink: #2a211c;
  --logo-filter: hue-rotate(115deg) saturate(.9);
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --shadow: 0 12px 32px -16px rgba(60, 40, 20, .22); --shadow-lg: 0 34px 80px -40px rgba(140, 70, 40, .35);
  color-scheme: light;
}
/* the serif reads best with a little less tightening */
:root[data-theme="clay"] h1, :root[data-theme="clay"] h2, :root[data-theme="clay"] h3 { letter-spacing: -.02em !important; font-weight: 600 !important; }

/* yellow & grey */
:root[data-theme="sun"] {
  --bg: #16171a; --bg-2: #1c1d21; --surface: #222327; --surface-2: #28292e;
  --ink: #f4f4f5; --ink-2: #d4d4d8; --muted: #a1a1aa; --line: #34353b; --line-2: #3f4047;
  --accent: #facc15; --accent-2: #fde047; --accent-soft: #3a3415; --ring: rgba(250, 204, 21, .4);
  --brand: linear-gradient(120deg, #fde047 0%, #facc15 50%, #eab308 100%); --on-brand: #18181b; --brand-shadow: #eab308;
  --glow-1: rgba(250, 204, 21, .16); --glow-2: rgba(161, 161, 170, .10);
  --final-bg: radial-gradient(60% 120% at 20% 0%, #a16207 0%, transparent 60%), #111113;
  --final-ink: #ffffff; --final-btn-ink: #18181b;
  --logo-filter: hue-rotate(160deg) saturate(1.2);
  --shadow: 0 16px 40px -18px rgba(0, 0, 0, .6); --shadow-lg: 0 40px 100px -40px rgba(234, 179, 8, .35);
  color-scheme: dark;
}

/* orange & purple */
:root[data-theme="sunset"] {
  --bg: #140c0a; --bg-2: #1b100d; --surface: #221410; --surface-2: #2a1913;
  --ink: #fff4ec; --ink-2: #f2d9c8; --muted: #b8998a; --line: #3a241c; --line-2: #4a2f24;
  --accent: #f97316; --accent-2: #fb923c; --accent-soft: #3a2026; --ring: rgba(249, 115, 22, .42);
  --brand: linear-gradient(120deg, #fb923c 0%, #f97316 55%, #a855f7 100%); --on-brand: #ffffff; --brand-shadow: #f97316;
  --glow-1: rgba(249, 115, 22, .28); --glow-2: rgba(139, 92, 246, .14);
  --final-bg: radial-gradient(60% 120% at 20% 0%, #ea580c 0%, transparent 60%),
              radial-gradient(60% 120% at 90% 100%, #7c3aed 0%, transparent 60%), #0e0806;
  --final-ink: #ffffff; --final-btn-ink: #140c0a;
  --logo-filter: hue-rotate(125deg) saturate(1.2);
  --shadow: 0 16px 40px -18px rgba(0, 0, 0, .6); --shadow-lg: 0 40px 100px -40px rgba(249, 115, 22, .45);
  color-scheme: dark;
}

/* pink, red & fire */
:root[data-theme="fire"] {
  --bg: #14070a; --bg-2: #1b0a0e; --surface: #230d13; --surface-2: #2a1017;
  --ink: #fff1f3; --ink-2: #f5ccd4; --muted: #c4919c; --line: #3a1720; --line-2: #4a1d29;
  --accent: #ec4899; --accent-2: #f472b6; --accent-soft: #3d1328; --ring: rgba(236, 72, 153, .42);
  --brand: linear-gradient(120deg, #f472b6 0%, #ec4899 55%, #ef4444 85%, #f97316 100%); --on-brand: #ffffff; --brand-shadow: #ec4899;
  --glow-1: rgba(236, 72, 153, .28); --glow-2: rgba(239, 68, 68, .16);
  --final-bg: radial-gradient(60% 120% at 20% 0%, #db2777 0%, transparent 60%),
              radial-gradient(60% 120% at 90% 100%, #ea580c 0%, transparent 60%), #0e0406;
  --final-ink: #ffffff; --final-btn-ink: #14070a;
  --logo-filter: hue-rotate(95deg) saturate(1.3);
  --shadow: 0 16px 40px -18px rgba(0, 0, 0, .65); --shadow-lg: 0 40px 100px -40px rgba(236, 72, 153, .5);
  color-scheme: dark;
}

/* ---------- mood picker ---------- */
.mood { position: relative; }
.mood-btn { width: 40px; height: 40px; padding: 0; border-radius: 12px; }
.mood-btn .sw { width: 18px; height: 18px; border-radius: 50%; background: var(--brand); box-shadow: inset 0 0 0 2px var(--surface), 0 0 0 1px var(--line-2); }
.mood-menu { max-height: min(72vh, 560px); overflow-y: auto; position: absolute; right: 0; top: calc(100% + 8px); z-index: 80; width: 230px; padding: 6px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
html[dir="rtl"] .mood-menu { right: auto; left: 0; }
.mood-menu[hidden] { display: none; }
.mood-menu .title { padding: 8px 10px 6px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mood-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent;
  color: var(--ink); font-size: 14.5px; font-weight: 500; text-align: start; cursor: pointer; }
.mood-opt:hover, .mood-opt:focus-visible { background: var(--bg-2); outline: none; }
.mood-opt .dotsw { flex: none; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.mood-opt .sub { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }
.mood-opt .check { margin-inline-start: auto; width: 16px; height: 16px; color: var(--accent); visibility: hidden; }
.mood-opt[aria-checked="true"] .check { visibility: visible; }