/*
 * Theme token layer — light/dark, ported from tmsuat_apps/apps/platform_web
 * (assets/css/theme.css).
 *
 * gateway_web has hundreds of hardcoded light-mode utilities (`bg-slate-900`,
 * `text-slate-300`, `bg-white`, `border-slate-200`, ...) spread across every
 * LiveView. Rather than annotate each one with a `dark:` variant, the
 * `gray`/`slate`/`zinc` ramps are redefined in tailwind.config.js to resolve
 * to the custom properties below, so flipping `.theme-dark` on <html>
 * re-themes the whole app at once — no per-template changes required.
 *
 * The ramp is INVERTED by role, not by hue: `slate-50` is the lightest
 * surface in light mode and the darkest surface in dark mode; `slate-900` is
 * the strongest text colour in both. Anything using the ramp for its
 * conventional purpose keeps its contrast direction for free.
 *
 * Values are bare `R G B` triplets so Tailwind's `<alpha-value>` opacity
 * modifiers (`bg-slate-900/50`) keep working.
 */

:root {
  /* Light — matches stock Tailwind `gray`, so nothing shifts visually. */
  --c-gray-50: 249 250 251;
  --c-gray-100: 243 244 246;
  --c-gray-200: 229 231 235;
  --c-gray-300: 209 213 219;
  --c-gray-400: 156 163 175;
  --c-gray-500: 107 114 128;
  --c-gray-600: 75 85 99;
  --c-gray-700: 55 65 81;
  --c-gray-800: 31 41 55;
  --c-gray-900: 17 24 39;
  --c-gray-950: 3 7 18;

  /* Light — matches stock Tailwind `slate`; gateway_web's chrome (sidebar,
     dock, badges) leans on this ramp more than plain `gray`. */
  --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;

  /* Light — matches stock Tailwind `zinc`. */
  --c-zinc-50: 250 250 250;
  --c-zinc-100: 244 244 245;
  --c-zinc-200: 228 228 231;
  --c-zinc-300: 212 212 216;
  --c-zinc-400: 161 161 170;
  --c-zinc-500: 113 113 122;
  --c-zinc-600: 82 82 91;
  --c-zinc-700: 63 63 70;
  --c-zinc-800: 39 39 42;
  --c-zinc-900: 24 24 27;
  --c-zinc-950: 9 9 11;

  /* Raw indigo, for the handful of places that build an inline `style=`
     rather than a Tailwind class (a "no admin colour configured" fallback
     next to a genuine per-row/per-status literal — see
     case_browse_components.ex) and so can't reach the `.theme-dark
     .bg-indigo-50` / `.text-indigo-800` class corrections below. Solid
     triplets, not the alpha-blended values those corrections use — there's
     no element behind these two to composite over reliably. */
  --c-indigo-50: 238 242 255;
  --c-indigo-800: 55 48 163;

  /* Surfaces. `surface` is what `bg-white` becomes; it sits ABOVE the page
     background in both themes, which is why dark mode raises it rather than
     darkening it. */
  --c-surface: 255 255 255;
  --c-surface-raised: 255 255 255;
  --c-surface-sunken: 249 250 251;

  --c-page: 248 250 252;
  --c-shadow: 0 0 0;
  --c-shadow-strength: 0.1;

  color-scheme: light;
}

.theme-dark {
  --c-gray-50: 15 16 19;
  --c-gray-100: 32 34 39;
  --c-gray-200: 44 47 54;
  --c-gray-300: 60 64 73;
  --c-gray-400: 113 118 131;
  --c-gray-500: 148 154 168;
  --c-gray-600: 178 184 197;
  --c-gray-700: 205 210 221;
  --c-gray-800: 228 231 238;
  --c-gray-900: 243 245 249;
  --c-gray-950: 250 251 253;

  /* `slate` and `zinc` converge on the same grayscale ramp in dark mode —
     that's what keeps surfaces from drifting apart by a few degrees of hue. */
  --c-slate-50: var(--c-gray-50);
  --c-slate-100: var(--c-gray-100);
  --c-slate-200: var(--c-gray-200);
  --c-slate-300: var(--c-gray-300);
  --c-slate-400: var(--c-gray-400);
  --c-slate-500: var(--c-gray-500);
  --c-slate-600: var(--c-gray-600);
  --c-slate-700: var(--c-gray-700);
  --c-slate-800: var(--c-gray-800);
  --c-slate-900: var(--c-gray-900);
  --c-slate-950: var(--c-gray-950);

  --c-zinc-50: var(--c-gray-50);
  --c-zinc-100: var(--c-gray-100);
  --c-zinc-200: var(--c-gray-200);
  --c-zinc-300: var(--c-gray-300);
  --c-zinc-400: var(--c-gray-400);
  --c-zinc-500: var(--c-gray-500);
  --c-zinc-600: var(--c-gray-600);
  --c-zinc-700: var(--c-gray-700);
  --c-zinc-800: var(--c-gray-800);
  --c-zinc-900: var(--c-gray-900);
  --c-zinc-950: var(--c-gray-950);

  /* Same idea as .bg-indigo-50/.text-indigo-800's dark corrections above,
     resolved to a solid triplet instead of an alpha blend. */
  --c-indigo-50: 33 35 54;
  --c-indigo-800: 165 180 252;

  --c-surface: 26 28 33;
  --c-surface-raised: 34 37 43;
  --c-surface-sunken: 11 12 15;

  --c-page: 15 16 19;
  --c-shadow: 0 0 0;
  --c-shadow-strength: 0.45;

  /* Native widgets — scrollbars, <select> popups, form control defaults —
     follow this without any per-element styling. */
  color-scheme: dark;
}

/* ---------------------------------------------------------------------------
 * Permanently-dark chrome
 *
 * `#admin-sidebar` and `#module-dock-bar` (GatewayWebWeb.Layouts.admin/1) are
 * a fixed-dark rail, like an editor's activity bar — `bg-slate-900`,
 * `text-slate-300`, `border-slate-700`, etc. inside them mean "dark chrome,
 * light text" regardless of the app's light/dark content theme, the same way
 * they did before this theme layer existed. Left alone, the ramp inversion
 * above would flip them to a near-white rail in dark mode instead.
 *
 * Re-declaring the `slate` custom properties here, scoped to just these two
 * containers, pins them back to their light-mode (i.e. "normal dark navy")
 * values no matter what `.theme-dark` on <html> says — CSS custom properties
 * resolve from the nearest ancestor that sets them, so every `slate-*`
 * utility already used inside stays correct without touching a single class.
 * ------------------------------------------------------------------------ */

#admin-sidebar,
#module-dock-bar {
  --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;
}

/* ---------------------------------------------------------------------------
 * `bg-white` bridge
 *
 * `white` is deliberately NOT remapped in the Tailwind config: `text-white`
 * on a `bg-indigo-600` button (the dock, the sidebar brand tile) must stay
 * white in both themes. Only the surface-ish uses are redirected, scoped to
 * the specific white-family utilities actually used in gateway_web.
 * ------------------------------------------------------------------------ */

.theme-dark .bg-white {
  background-color: rgb(var(--c-surface));
}
.theme-dark .bg-white\/5 {
  background-color: rgb(var(--c-surface) / 0.05);
}
.theme-dark .bg-white\/10 {
  background-color: rgb(var(--c-surface) / 0.1);
}
.theme-dark .bg-white\/20 {
  background-color: rgb(var(--c-surface) / 0.2);
}
.theme-dark .bg-white\/60 {
  background-color: rgb(var(--c-surface) / 0.6);
}
.theme-dark .bg-white\/70 {
  background-color: rgb(var(--c-surface) / 0.7);
}
.theme-dark .hover\:bg-white:hover {
  background-color: rgb(var(--c-surface));
}
.theme-dark .hover\:bg-white\/5:hover {
  background-color: rgb(var(--c-surface) / 0.05);
}
.theme-dark .hover\:bg-white\/20:hover {
  background-color: rgb(var(--c-surface) / 0.2);
}
.theme-dark .border-white\/20 {
  border-color: rgb(var(--c-surface-raised) / 0.2);
}
.theme-dark .border-white\/30 {
  border-color: rgb(var(--c-surface-raised) / 0.3);
}
.theme-dark .border-white\/50 {
  border-color: rgb(var(--c-surface-raised) / 0.5);
}
.theme-dark .border-white\/60 {
  border-color: rgb(var(--c-surface-raised) / 0.6);
}
.theme-dark .to-white {
  --tw-gradient-to: rgb(var(--c-surface)) var(--tw-gradient-to-position);
}

/* Shadows read as a dark halo on light surfaces and vanish on dark ones, so
   dark mode leans on a hairline border instead of deepening the shadow. */
.theme-dark .shadow-sm,
.theme-dark .shadow,
.theme-dark .shadow-md,
.theme-dark .shadow-lg,
.theme-dark .shadow-xl,
.theme-dark .shadow-2xl {
  --tw-shadow-color: rgb(var(--c-shadow) / var(--c-shadow-strength));
  --tw-shadow: var(--tw-shadow-colored);
}

/* ---------------------------------------------------------------------------
 * Theme transition
 *
 * Scoped to the properties that actually change, and suppressed for anyone
 * who asked for reduced motion. Deliberately NOT a global `transition: all`
 * — that would fight every hover state in the app.
 * ------------------------------------------------------------------------ */

.theme-transition,
.theme-transition *,
.theme-transition *::before,
.theme-transition *::after {
  transition: background-color 180ms ease, border-color 180ms ease,
    color 180ms ease, fill 180ms ease, stroke 180ms ease !important;
  transition-delay: 0ms !important;
}

@media (prefers-reduced-motion: reduce) {
  .theme-transition,
  .theme-transition *,
  .theme-transition *::before,
  .theme-transition *::after {
    transition: none !important;
  }
}

/* ---------------------------------------------------------------------------
 * Theme toggle icon state
 *
 * The header button renders all three icons; which one is visible is decided
 * here from `data-theme-mode` on <html>. That attribute is set by the
 * pre-paint bootstrap in `GatewayWebWeb.Layouts.theme_bootstrap/1`, so the
 * button shows the right icon on the very first frame.
 * ------------------------------------------------------------------------ */

[data-theme-icon] {
  display: none;
}

html[data-theme-mode="light"] [data-theme-icon="light"],
html[data-theme-mode="dark"] [data-theme-icon="dark"],
html[data-theme-mode="system"] [data-theme-icon="system"] {
  display: inline-block;
}

html:not([data-theme-mode]) [data-theme-icon="light"] {
  display: inline-block;
}

/* ---------------------------------------------------------------------------
 * Accent tints
 *
 * `bg-{hue}-50` / `bg-{hue}-100` surfaces (role badges, status chips, info
 * panels) paired with `text-{hue}-600..900` and `border-{hue}-100..300` are
 * correct on white and far too bright on a dark surface. Unlike the
 * neutrals they cannot ride the ramp: the hue has to survive while only the
 * lightness flips, so each tint becomes a low-alpha wash of its own hue with
 * a lightened foreground. Saturated mid-scale utilities (`bg-indigo-600`
 * buttons) are untouched. Scoped to the hues gateway_web actually uses.
 * ------------------------------------------------------------------------ */

.theme-dark .bg-blue-50 { background-color: rgb(59 130 246 / 0.10); }
.theme-dark .bg-blue-100 { background-color: rgb(59 130 246 / 0.16); }
.theme-dark .border-blue-100,
.theme-dark .border-blue-200,
.theme-dark .border-blue-300 { border-color: rgb(59 130 246 / 0.32); }
.theme-dark .text-blue-600 { color: rgb(96 165 250); }
.theme-dark .text-blue-700,
.theme-dark .text-blue-800,
.theme-dark .text-blue-900 { color: rgb(147 197 253); }

.theme-dark .bg-indigo-50 { background-color: rgb(99 102 241 / 0.10); }
.theme-dark .bg-indigo-100 { background-color: rgb(99 102 241 / 0.16); }
.theme-dark .border-indigo-100,
.theme-dark .border-indigo-200,
.theme-dark .border-indigo-300 { border-color: rgb(99 102 241 / 0.32); }
.theme-dark .text-indigo-600 { color: rgb(129 140 248); }
.theme-dark .text-indigo-700,
.theme-dark .text-indigo-800,
.theme-dark .text-indigo-900 { color: rgb(165 180 252); }

.theme-dark .bg-purple-50 { background-color: rgb(168 85 247 / 0.10); }
.theme-dark .bg-purple-100 { background-color: rgb(168 85 247 / 0.16); }
.theme-dark .border-purple-100,
.theme-dark .border-purple-200,
.theme-dark .border-purple-300 { border-color: rgb(168 85 247 / 0.32); }
.theme-dark .text-purple-600 { color: rgb(192 132 252); }
.theme-dark .text-purple-700,
.theme-dark .text-purple-800,
.theme-dark .text-purple-900 { color: rgb(216 180 254); }

.theme-dark .bg-violet-50 { background-color: rgb(139 92 246 / 0.10); }
.theme-dark .bg-violet-100 { background-color: rgb(139 92 246 / 0.16); }
.theme-dark .border-violet-100,
.theme-dark .border-violet-200,
.theme-dark .border-violet-300 { border-color: rgb(139 92 246 / 0.32); }
.theme-dark .text-violet-600 { color: rgb(167 139 250); }
.theme-dark .text-violet-700,
.theme-dark .text-violet-800,
.theme-dark .text-violet-900 { color: rgb(196 181 253); }

.theme-dark .bg-fuchsia-50 { background-color: rgb(217 70 239 / 0.10); }
.theme-dark .bg-fuchsia-100 { background-color: rgb(217 70 239 / 0.16); }
.theme-dark .border-fuchsia-100,
.theme-dark .border-fuchsia-200,
.theme-dark .border-fuchsia-300 { border-color: rgb(217 70 239 / 0.32); }
.theme-dark .text-fuchsia-600 { color: rgb(232 121 249); }
.theme-dark .text-fuchsia-700,
.theme-dark .text-fuchsia-800,
.theme-dark .text-fuchsia-900 { color: rgb(240 171 252); }

.theme-dark .bg-sky-50 { background-color: rgb(14 165 233 / 0.10); }
.theme-dark .bg-sky-100 { background-color: rgb(14 165 233 / 0.16); }
.theme-dark .border-sky-100,
.theme-dark .border-sky-200,
.theme-dark .border-sky-300 { border-color: rgb(14 165 233 / 0.32); }
.theme-dark .text-sky-600 { color: rgb(56 189 248); }
.theme-dark .text-sky-700,
.theme-dark .text-sky-800,
.theme-dark .text-sky-900 { color: rgb(125 211 252); }

.theme-dark .bg-cyan-50 { background-color: rgb(6 182 212 / 0.10); }
.theme-dark .bg-cyan-100 { background-color: rgb(6 182 212 / 0.16); }
.theme-dark .border-cyan-100,
.theme-dark .border-cyan-200,
.theme-dark .border-cyan-300 { border-color: rgb(6 182 212 / 0.32); }
.theme-dark .text-cyan-600 { color: rgb(34 211 238); }
.theme-dark .text-cyan-700,
.theme-dark .text-cyan-800,
.theme-dark .text-cyan-900 { color: rgb(103 232 249); }

.theme-dark .bg-teal-50 { background-color: rgb(20 184 166 / 0.10); }
.theme-dark .bg-teal-100 { background-color: rgb(20 184 166 / 0.16); }
.theme-dark .border-teal-100,
.theme-dark .border-teal-200,
.theme-dark .border-teal-300 { border-color: rgb(20 184 166 / 0.32); }
.theme-dark .text-teal-600 { color: rgb(45 212 191); }
.theme-dark .text-teal-700,
.theme-dark .text-teal-800,
.theme-dark .text-teal-900 { color: rgb(94 234 212); }

.theme-dark .bg-emerald-50 { background-color: rgb(16 185 129 / 0.10); }
.theme-dark .bg-emerald-100 { background-color: rgb(16 185 129 / 0.16); }
.theme-dark .border-emerald-100,
.theme-dark .border-emerald-200,
.theme-dark .border-emerald-300 { border-color: rgb(16 185 129 / 0.32); }
.theme-dark .text-emerald-600 { color: rgb(52 211 153); }
.theme-dark .text-emerald-700,
.theme-dark .text-emerald-800,
.theme-dark .text-emerald-900 { color: rgb(110 231 183); }

.theme-dark .bg-green-50 { background-color: rgb(34 197 94 / 0.10); }
.theme-dark .bg-green-100 { background-color: rgb(34 197 94 / 0.16); }
.theme-dark .border-green-100,
.theme-dark .border-green-200,
.theme-dark .border-green-300 { border-color: rgb(34 197 94 / 0.32); }
.theme-dark .text-green-600 { color: rgb(74 222 128); }
.theme-dark .text-green-700,
.theme-dark .text-green-800,
.theme-dark .text-green-900 { color: rgb(134 239 172); }

.theme-dark .bg-amber-50 { background-color: rgb(245 158 11 / 0.10); }
.theme-dark .bg-amber-100 { background-color: rgb(245 158 11 / 0.16); }
.theme-dark .border-amber-100,
.theme-dark .border-amber-200,
.theme-dark .border-amber-300 { border-color: rgb(245 158 11 / 0.32); }
.theme-dark .text-amber-600 { color: rgb(251 191 36); }
.theme-dark .text-amber-700,
.theme-dark .text-amber-800,
.theme-dark .text-amber-900 { color: rgb(252 211 77); }

.theme-dark .bg-yellow-50 { background-color: rgb(234 179 8 / 0.10); }
.theme-dark .bg-yellow-100 { background-color: rgb(234 179 8 / 0.16); }
.theme-dark .border-yellow-100,
.theme-dark .border-yellow-200,
.theme-dark .border-yellow-300 { border-color: rgb(234 179 8 / 0.32); }
.theme-dark .text-yellow-600 { color: rgb(250 204 21); }
.theme-dark .text-yellow-700,
.theme-dark .text-yellow-800,
.theme-dark .text-yellow-900 { color: rgb(253 224 71); }

.theme-dark .bg-orange-50 { background-color: rgb(249 115 22 / 0.10); }
.theme-dark .bg-orange-100 { background-color: rgb(249 115 22 / 0.16); }
.theme-dark .border-orange-100,
.theme-dark .border-orange-200,
.theme-dark .border-orange-300 { border-color: rgb(249 115 22 / 0.32); }
.theme-dark .text-orange-600 { color: rgb(251 146 60); }
.theme-dark .text-orange-700,
.theme-dark .text-orange-800,
.theme-dark .text-orange-900 { color: rgb(253 186 116); }

.theme-dark .bg-red-50 { background-color: rgb(239 68 68 / 0.10); }
.theme-dark .bg-red-100 { background-color: rgb(239 68 68 / 0.16); }
.theme-dark .border-red-100,
.theme-dark .border-red-200,
.theme-dark .border-red-300 { border-color: rgb(239 68 68 / 0.32); }
.theme-dark .text-red-600 { color: rgb(248 113 113); }
.theme-dark .text-red-700,
.theme-dark .text-red-800,
.theme-dark .text-red-900 { color: rgb(252 165 165); }

.theme-dark .bg-rose-50 { background-color: rgb(244 63 94 / 0.10); }
.theme-dark .bg-rose-100 { background-color: rgb(244 63 94 / 0.16); }
.theme-dark .border-rose-100,
.theme-dark .border-rose-200,
.theme-dark .border-rose-300 { border-color: rgb(244 63 94 / 0.32); }
.theme-dark .text-rose-600 { color: rgb(251 113 133); }
.theme-dark .text-rose-700,
.theme-dark .text-rose-800,
.theme-dark .text-rose-900 { color: rgb(253 164 175); }

.theme-dark .bg-pink-50 { background-color: rgb(236 72 153 / 0.10); }
.theme-dark .bg-pink-100 { background-color: rgb(236 72 153 / 0.16); }
.theme-dark .border-pink-100,
.theme-dark .border-pink-200,
.theme-dark .border-pink-300 { border-color: rgb(236 72 153 / 0.32); }
.theme-dark .text-pink-600 { color: rgb(244 114 182); }
.theme-dark .text-pink-700,
.theme-dark .text-pink-800,
.theme-dark .text-pink-900 { color: rgb(249 168 212); }

/* `from-*-50`/`to-*-50` gradient stops (card headers) hit the same gap as
   `bg-*-50`: they set `--tw-gradient-from`/`-to`, not `background-color`, so
   the tint rules above never touch them. Same RGB triplets, applied to the
   gradient-stop vars instead. Scoped to the hues actually paired this way. */
.theme-dark .from-amber-50 { --tw-gradient-from: rgb(245 158 11 / 0.10) var(--tw-gradient-from-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.theme-dark .to-amber-50 { --tw-gradient-to: rgb(245 158 11 / 0.10) var(--tw-gradient-to-position); }
.theme-dark .from-indigo-50 { --tw-gradient-from: rgb(99 102 241 / 0.10) var(--tw-gradient-from-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.theme-dark .to-indigo-50 { --tw-gradient-to: rgb(99 102 241 / 0.10) var(--tw-gradient-to-position); }
.theme-dark .from-purple-50 { --tw-gradient-from: rgb(168 85 247 / 0.10) var(--tw-gradient-from-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.theme-dark .to-purple-50 { --tw-gradient-to: rgb(168 85 247 / 0.10) var(--tw-gradient-to-position); }