/* Web Mage theming for the CMS app — the light and dark values behind the
 * variable-backed Tailwind palette declared in `tailwind.config.js`.
 *
 * Hand-written; NOT generated. `public/tailwind.css` is the Tailwind output and
 * stays purely generated, so this file is where theme values live.
 *
 * MUST be linked AFTER `vendor/flyonui.min.css` — FlyonUI declares the same
 * `--color-*` names at the same specificity, so an earlier link loses.
 *
 * Light is the Tailwind v3 default palette verbatim (channels taken from
 * `tailwindcss/colors.js`), so light mode is exactly the design that shipped
 * before dark mode existed. Do not retune these by eye.
 */

:root,
[data-theme="light"] {
  color-scheme: light;

  --c-slate-50:248 250 252; --c-slate-100:241 245 249; --c-slate-200:226 232 240; --c-slate-300:203 213 225; --c-slate-400:148 163 184; --c-slate-500:100 116 139; --c-slate-600:71 85 105; --c-slate-700:51 65 85; --c-slate-800:30 41 59; --c-slate-900:15 23 42; --c-slate-950:2 6 23;
  --c-indigo-50:238 242 255; --c-indigo-100:224 231 255; --c-indigo-200:199 210 254; --c-indigo-300:165 180 252; --c-indigo-400:129 140 248; --c-indigo-500:99 102 241; --c-indigo-600:79 70 229; --c-indigo-700:67 56 202; --c-indigo-800:55 48 163; --c-indigo-900:49 46 129; --c-indigo-950:30 27 75;
  --c-amber-50:255 251 235; --c-amber-100:254 243 199; --c-amber-200:253 230 138; --c-amber-300:252 211 77; --c-amber-400:251 191 36; --c-amber-500:245 158 11; --c-amber-600:217 119 6; --c-amber-700:180 83 9; --c-amber-800:146 64 14; --c-amber-900:120 53 15; --c-amber-950:69 26 3;
  --c-emerald-50:236 253 245; --c-emerald-100:209 250 229; --c-emerald-200:167 243 208; --c-emerald-300:110 231 183; --c-emerald-400:52 211 153; --c-emerald-500:16 185 129; --c-emerald-600:5 150 105; --c-emerald-700:4 120 87; --c-emerald-800:6 95 70; --c-emerald-900:6 78 59; --c-emerald-950:2 44 34;
  --c-red-50:254 242 242; --c-red-100:254 226 226; --c-red-200:254 202 202; --c-red-300:252 165 165; --c-red-400:248 113 113; --c-red-500:239 68 68; --c-red-600:220 38 38; --c-red-700:185 28 28; --c-red-800:153 27 27; --c-red-900:127 29 29; --c-red-950:69 10 10;
  --c-rose-50:255 241 242; --c-rose-100:255 228 230; --c-rose-200:254 205 211; --c-rose-300:253 164 175; --c-rose-400:251 113 133; --c-rose-500:244 63 94; --c-rose-600:225 29 72; --c-rose-700:190 18 60; --c-rose-800:159 18 57; --c-rose-900:136 19 55; --c-rose-950:76 5 25;
  --c-sky-50:240 249 255; --c-sky-100:224 242 254; --c-sky-200:186 230 253; --c-sky-300:125 211 252; --c-sky-400:56 189 248; --c-sky-500:14 165 233; --c-sky-600:2 132 199; --c-sky-700:3 105 161; --c-sky-800:7 89 133; --c-sky-900:12 74 110; --c-sky-950:8 47 73;
  --c-violet-50:245 243 255; --c-violet-100:237 233 254; --c-violet-200:221 214 254; --c-violet-300:196 181 253; --c-violet-400:167 139 250; --c-violet-500:139 92 246; --c-violet-600:124 58 237; --c-violet-700:109 40 217; --c-violet-800:91 33 182; --c-violet-900:76 29 149; --c-violet-950:46 16 101;
  --c-fuchsia-50:253 244 255; --c-fuchsia-100:250 232 255; --c-fuchsia-200:245 208 254; --c-fuchsia-300:240 171 252; --c-fuchsia-400:232 121 249; --c-fuchsia-500:217 70 239; --c-fuchsia-600:192 38 211; --c-fuchsia-700:162 28 175; --c-fuchsia-800:134 25 143; --c-fuchsia-900:112 26 117; --c-fuchsia-950:74 4 78;
  --c-orange-50:255 247 237; --c-orange-100:255 237 213; --c-orange-200:254 215 170; --c-orange-300:253 186 116; --c-orange-400:251 146 60; --c-orange-500:249 115 22; --c-orange-600:234 88 12; --c-orange-700:194 65 12; --c-orange-800:154 52 18; --c-orange-900:124 45 18; --c-orange-950:67 20 7;
  --c-cyan-50:236 254 255; --c-cyan-100:207 250 254; --c-cyan-200:165 243 252; --c-cyan-300:103 232 249; --c-cyan-400:34 211 238; --c-cyan-500:6 182 212; --c-cyan-600:8 145 178; --c-cyan-700:14 116 144; --c-cyan-800:21 94 117; --c-cyan-900:22 78 99; --c-cyan-950:8 51 68;
  --c-purple-50:250 245 255; --c-purple-100:243 232 255; --c-purple-200:233 213 255; --c-purple-300:216 180 254; --c-purple-400:192 132 252; --c-purple-500:168 85 247; --c-purple-600:147 51 234; --c-purple-700:126 34 206; --c-purple-800:107 33 168; --c-purple-900:88 28 135; --c-purple-950:59 7 100;
  --c-teal-50:240 253 250; --c-teal-100:204 251 241; --c-teal-200:153 246 228; --c-teal-300:94 234 212; --c-teal-400:45 212 191; --c-teal-500:20 184 166; --c-teal-600:13 148 136; --c-teal-700:15 118 110; --c-teal-800:17 94 89; --c-teal-900:19 78 74; --c-teal-950:4 47 46;

  /* Surfaces that are not part of a Tailwind ramp. */
  --c-surface: 255 255 255;   /* what `bg-white` paints */
  --c-ground: 245 246 250;    /* the page behind the cards */
  --c-ink: 12 16 34;          /* type that sits ON a bright fill */
}

/* The Web Mage dark palette.
 *
 * These are not a fresh design. `views/wm-style.ts` describes its own navy /
 * teal / violet / iris ramps as "the product's dark CSS flipped onto paper", so
 * the dark ramps below are those ramps read back in the other direction — one
 * set of brand values rather than two that drift. The named anchors:
 *
 *   void #0C1022   page ground        moonlight #E8ECFF  primary text
 *   panel #151B33  card surface       mist      #8B93B8  muted text
 *   rune teal #3DF2D3   primary accent (indigo-600)
 *   spell violet #7B5CFF secondary    (sky-600)
 *   spell magenta #E14FFF tertiary    (fuchsia-600)
 *
 * The neutral and accent ramps invert: shade 50 becomes the deepest surface and
 * 950 the brightest. Status families (amber/emerald/red/rose/orange) keep their
 * hue and invert lightness, with the 50/100/200/300 tints pulled toward the void
 * so a `bg-red-50` badge sits on the dark ground instead of glowing off it.
 * Every text-on-tint pair the codebase actually uses was contrast-checked and
 * clears WCAG AA; `scripts/theme-smoke.ts` re-checks them.
 */
[data-theme="dark"] {
  color-scheme: dark;

  --c-slate-50:16 21 42; --c-slate-100:23 29 54; --c-slate-200:35 42 74; --c-slate-300:46 55 87; --c-slate-400:107 115 150; --c-slate-500:139 147 184; --c-slate-600:168 175 206; --c-slate-700:195 200 222; --c-slate-800:218 222 236; --c-slate-900:232 236 255; --c-slate-950:245 246 251;
  --c-indigo-50:6 35 31; --c-indigo-100:8 51 44; --c-indigo-200:10 74 64; --c-indigo-300:10 146 124; --c-indigo-400:15 184 156; --c-indigo-500:20 216 184; --c-indigo-600:61 242 211; --c-indigo-700:109 246 223; --c-indigo-800:157 248 232; --c-indigo-900:207 253 244; --c-indigo-950:236 255 251;
  --c-amber-50:22 18 28; --c-amber-100:44 27 28; --c-amber-200:82 41 24; --c-amber-300:146 70 14; --c-amber-400:217 119 6; --c-amber-500:245 158 11; --c-amber-600:251 191 36; --c-amber-700:252 211 77; --c-amber-800:253 230 138; --c-amber-900:254 243 199; --c-amber-950:255 251 235;
  --c-emerald-50:10 21 34; --c-emerald-100:10 35 42; --c-emerald-200:9 57 53; --c-emerald-300:6 99 76; --c-emerald-400:5 150 105; --c-emerald-500:16 185 129; --c-emerald-600:52 211 153; --c-emerald-700:110 231 183; --c-emerald-800:167 243 208; --c-emerald-900:209 250 229; --c-emerald-950:236 253 245;
  --c-red-50:22 15 30; --c-red-100:47 20 33; --c-red-200:85 22 30; --c-red-300:150 26 29; --c-red-400:220 38 38; --c-red-500:239 68 68; --c-red-600:248 113 113; --c-red-700:252 165 165; --c-red-800:254 202 202; --c-red-900:254 226 226; --c-red-950:254 242 242;
  --c-rose-50:24 14 32; --c-rose-100:49 17 40; --c-rose-200:88 17 46; --c-rose-300:154 18 55; --c-rose-400:225 29 72; --c-rose-500:244 63 94; --c-rose-600:251 113 133; --c-rose-700:253 164 175; --c-rose-800:254 205 211; --c-rose-900:255 228 230; --c-rose-950:255 241 242;
  --c-sky-50:23 17 54; --c-sky-100:34 24 71; --c-sky-200:46 33 96; --c-sky-300:75 50 196; --c-sky-400:98 68 232; --c-sky-500:109 77 245; --c-sky-600:123 92 255; --c-sky-700:169 149 255; --c-sky-800:213 204 255; --c-sky-900:236 232 255; --c-sky-950:245 243 255;
  --c-violet-50:23 17 54; --c-violet-100:34 24 71; --c-violet-200:46 33 96; --c-violet-300:75 50 196; --c-violet-400:98 68 232; --c-violet-500:109 77 245; --c-violet-600:123 92 255; --c-violet-700:169 149 255; --c-violet-800:213 204 255; --c-violet-900:236 232 255; --c-violet-950:245 243 255;
  --c-fuchsia-50:42 7 51; --c-fuchsia-100:61 10 74; --c-fuchsia-200:85 17 102; --c-fuchsia-300:122 26 145; --c-fuchsia-400:163 36 191; --c-fuchsia-500:194 47 224; --c-fuchsia-600:225 79 255; --c-fuchsia-700:236 133 255; --c-fuchsia-800:243 179 255; --c-fuchsia-900:251 230 255; --c-fuchsia-950:254 245 255;
  --c-orange-50:22 17 29; --c-orange-100:46 25 29; --c-orange-200:86 35 26; --c-orange-300:158 55 16; --c-orange-400:234 88 12; --c-orange-500:249 115 22; --c-orange-600:251 146 60; --c-orange-700:253 186 116; --c-orange-800:254 215 170; --c-orange-900:255 237 213; --c-orange-950:255 247 237;
  --c-cyan-50:11 22 40; --c-cyan-100:15 35 54; --c-cyan-200:17 57 77; --c-cyan-300:14 96 122; --c-cyan-400:8 145 178; --c-cyan-500:6 182 212; --c-cyan-600:34 211 238; --c-cyan-700:103 232 249; --c-cyan-800:165 243 252; --c-cyan-900:207 250 254; --c-cyan-950:236 254 255;
  --c-purple-50:20 14 46; --c-purple-100:35 20 64; --c-purple-200:61 25 104; --c-purple-300:103 30 172; --c-purple-400:147 51 234; --c-purple-500:168 85 247; --c-purple-600:192 132 252; --c-purple-700:216 180 254; --c-purple-800:233 213 255; --c-purple-900:243 232 255; --c-purple-950:250 245 255;
  --c-teal-50:11 22 36; --c-teal-100:14 35 46; --c-teal-200:15 57 63; --c-teal-300:14 98 95; --c-teal-400:13 148 136; --c-teal-500:20 184 166; --c-teal-600:45 212 191; --c-teal-700:94 234 212; --c-teal-800:153 246 228; --c-teal-900:204 251 241; --c-teal-950:240 253 250;

  --c-surface: 21 27 51;   /* panel */
  --c-ground: 12 16 34;    /* void */
  --c-ink: 12 16 34;

  background-color: rgb(var(--c-ground));
}

/* FlyonUI's own component tokens. FlyonUI ships a stock `[data-theme=dark]`
 * block; these land on the brand instead. Same specificity, so this file must be
 * linked after `flyonui.min.css`.
 */
[data-theme="dark"] {
  --color-base-100: #151B33;
  --color-base-200: #0C1022;
  --color-base-300: #232A4A;
  --color-base-content: #E8ECFF;
  --color-primary: #3DF2D3;
  --color-primary-content: #0C1022;
  --color-secondary: #8B93B8;
  --color-secondary-content: #0C1022;
  --color-accent: #7B5CFF;
  --color-accent-content: #E8ECFF;
  --color-neutral: #232A4A;
  --color-neutral-content: #E8ECFF;
  --color-info: #7B5CFF;
  --color-info-content: #0C1022;
  --color-success: #34D399;
  --color-success-content: #0C1022;
  --color-warning: #FBBF24;
  --color-warning-content: #0C1022;
  --color-error: #F87171;
  --color-error-content: #0C1022;
}

/* ---------------------------------------------------------------------------
 * `white` is not variable-backed, and the two things it does pull apart in dark
 *
 * `bg-white` (228 uses) is the card surface and must darken; `text-white` (94
 * uses) sits on coloured button fills and must stay white. One token cannot do
 * both, so `white` is left literal in the config and the SURFACE utilities are
 * overridden here. `.text-white` is deliberately absent from this block.
 * Specificity is (0,2,0) against the utility's (0,1,0), so these win.
 * ------------------------------------------------------------------------- */
[data-theme="dark"] .bg-white { background-color: rgb(var(--c-surface) / var(--tw-bg-opacity, 1)); }
/* `focus:bg-white` compiles to `.focus\:bg-white:focus` — a different class the
 * `.bg-white` override above cannot match. Without this, the auth-page inputs
 * (login/signup/forgot/reset) flip to literal white ON FOCUS while their
 * `text-slate-900` stays moonlight: near-white type on a white field. The
 * focused well deepens to the ground instead; the indigo focus ring still
 * marks the state. */
[data-theme="dark"] .focus\:bg-white:focus { background-color: rgb(var(--c-ground) / var(--tw-bg-opacity, 1)); }
[data-theme="dark"] .via-white {
  --tw-gradient-to: rgb(var(--c-surface) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(var(--c-surface)) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

/* The translucent whites split the same way, and the alpha is the tell.
 * A HIGH alpha is a surface — the header bar, the code panes, a toolbar — and
 * darkens with everything else. A LOW alpha is a highlight painted ON a coloured
 * button (`hover:bg-white/10`, `ring-white/10`, `ring-white/40`,
 * `border-white/20`) and must stay white, so those are deliberately absent. */
[data-theme="dark"] .bg-white\/80 { background-color: rgb(var(--c-surface) / 0.8); }
[data-theme="dark"] .bg-white\/70 { background-color: rgb(var(--c-surface) / 0.7); }
[data-theme="dark"] .bg-white\/60 { background-color: rgb(var(--c-surface) / 0.6); }

/* ---------------------------------------------------------------------------
 * Ink surfaces
 *
 * `bg-slate-900` means two different things in this codebase: the darkest
 * neutral (which must invert, and does — it becomes moonlight, the heading
 * colour) and an "ink" component surface — the secondary button, the active
 * tab, the avatar chip, the modal scrim — which must NOT, because the literal
 * `text-white` on it does not flip with the palette. The pairing is the signal,
 * so these are matched as compound selectors rather than by shade alone.
 * ------------------------------------------------------------------------- */
[data-theme="dark"] .bg-slate-900.text-white,
[data-theme="dark"] .bg-slate-950.text-slate-100 { background-color: #232A4A; }
[data-theme="dark"] .bg-slate-900.text-white:hover { background-color: #2E3757; }
[data-theme="dark"] .bg-slate-900\/40 { background-color: rgb(12 16 34 / 0.6); }

/* Same asymmetry in gradient form: an ink chip and an ink button. */
[data-theme="dark"] .from-slate-700.to-slate-900,
[data-theme="dark"] .from-slate-800.to-slate-900 {
  --tw-gradient-from: #2E3757 var(--tw-gradient-from-position);
  --tw-gradient-to: #10152A var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

/* ---------------------------------------------------------------------------
 * Ink type on bright fills
 *
 * `views/wm-style.ts` states the brand rule outright: "Teal fills carry ink
 * type, never white". Inverted, `bg-indigo-600` is rune teal — white on it is
 * 1.4:1. Ink is 13.3:1. Every fill listed here was checked against both, and
 * ink won; the violet/magenta fills that white still wins on are deliberately
 * absent, so they keep it. Icons inherit via `stroke="currentColor"`.
 * ------------------------------------------------------------------------- */
[data-theme="dark"] .text-white.bg-indigo-600,
[data-theme="dark"] .text-white.bg-emerald-600,
[data-theme="dark"] .text-white.bg-rose-600,
[data-theme="dark"] .text-white.from-indigo-600,
[data-theme="dark"] .text-white.from-indigo-500,
[data-theme="dark"] .text-white.from-fuchsia-500,
[data-theme="dark"] .text-white.from-fuchsia-600,
[data-theme="dark"] .text-white.from-rose-500,
[data-theme="dark"] .text-white.from-orange-500,
[data-theme="dark"] .text-white.from-amber-500,
[data-theme="dark"] .text-white.from-sky-500 { color: rgb(var(--c-ink)); }

/* The primary button's hover lift casts a slate shadow tuned for paper; on the
 * void it reads as a smudge. Deepen it. (`.btn-rt` is defined in views/layout.ts.) */
[data-theme="dark"] .btn-rt:hover { box-shadow: 0 6px 18px -6px rgb(0 0 0 / 0.6); }

/* ---------------------------------------------------------------------------
 * Theme-conditional content
 *
 * The toggle in the user menu renders both states and lets CSS pick, because the
 * server always emits the dark default and the pre-paint script corrects it —
 * anything chosen from server-side state would be wrong for a user on light.
 * Beats `.contents`/`.flex` etc. on specificity (0,2,0 vs 0,1,0).
 * ------------------------------------------------------------------------- */
[data-theme="dark"] .rt-theme-light,
[data-theme="light"] .rt-theme-dark { display: none; }