/*
 * DF Theme Overlay v1 (2026-07-09)
 * ---------------------------------
 * Pure-CSS visual layer for the compiled Next.js bundle. No JS is touched.
 *
 * Strategy: the bundled Tailwind v4 CSS resolves every palette utility
 * through `var(--color-*)` and every shadcn-style component through
 * semantic tokens (--background/--card/--border/--ring/...). This file is
 * loaded after the bundle and re-maps those variables at slightly higher
 * specificity (html:root / html.dark), so the whole app re-skins without
 * fighting individual utility classes.
 *
 * Token design informed by:
 *  - shadcn/ui + Radix: semantic role tokens, 12-step scale roles
 *    (app bg -> component bg -> borders -> solid -> text).
 *  - Linear: near-black canvas with a tight 4-step surface ladder,
 *    hairline borders (~6-14% alpha) instead of drop shadows,
 *    150ms color-only hover transitions.
 *  - HeroUI / Semi Design: fill tokens for inputs, calculated hover
 *    states, inset rim highlight for dark elevation.
 *  - Muzli/ColorArchive dark-mode guides: elevation via surface
 *    illumination (+5-8% L per layer), no pure black / pure white,
 *    slightly boosted chroma for dark-mode accents.
 *
 * Brand (DESIGN.md): --df-blue #1457e8, --df-sky #0895ee, --df-cyan #23d4df,
 * --df-deep #001120, --df-panel #06172a. Deep navy creative console.
 */

/* ---------------------------------------------------------------------
 * 1. DF brand tokens
 * ------------------------------------------------------------------ */
:root {
  --df-blue: #1457e8;
  --df-sky: #0895ee;
  --df-cyan: #23d4df;
  --df-deep: #001120;
  --df-panel: #06172a;

  /* dark surface ladder (canvas -> raised) */
  --df-surface-0: #001120;
  --df-surface-1: #06172a;
  --df-surface-2: #0a2035;
  --df-surface-3: #0e2942;
  --df-surface-4: #133153;

  /* hairline borders on navy */
  --df-line-soft: rgba(148, 197, 255, 0.10);
  --df-line: rgba(148, 197, 255, 0.14);
  --df-line-strong: rgba(148, 197, 255, 0.22);

  /* text on navy */
  --df-text-hi: #eaf3ff;
  --df-text: #c6d6ec;
  --df-text-mute: #8ea4c4;

  /* primary gradient family */
  --df-grad-primary: linear-gradient(135deg, #1a5ff0 0%, #0b8ce8 100%);
  --df-grad-primary-hover: linear-gradient(135deg, #2e6ffa 0%, #18a0f5 100%);
  --df-grad-deep: linear-gradient(135deg, #1457e8 0%, #0895ee 100%);

  /* focus ring: sky core + cyan halo */
  --df-focus-ring: 0 0 0 2px rgba(8, 149, 238, 0.9), 0 0 0 5px rgba(35, 212, 223, 0.22);
}

/* ---------------------------------------------------------------------
 * 2. Palette re-map — LIGHT (cool blue-tinted neutrals, admin pages)
 *    html:root (0,1,1) beats bundle :root (0,1,0).
 * ------------------------------------------------------------------ */
html:root {
  /* stone: warm gray -> cool DF gray */
  --color-stone-50: #f7fafe;
  --color-stone-100: #eef3fa;
  --color-stone-200: #dde7f2;
  --color-stone-300: #c3d2e4;
  --color-stone-400: #8fa2bd;
  --color-stone-500: #5f7392;
  --color-stone-600: #47597a;
  --color-stone-700: #34455f;
  --color-stone-800: #1d2c44;
  --color-stone-900: #0f2138;
  --color-stone-950: #071528;

  /* blue: align to DF brand */
  --color-blue-50: #eef5ff;
  --color-blue-100: #dcebfe;
  --color-blue-200: #bcd8fd;
  --color-blue-300: #8ec2fa;
  --color-blue-400: #4d9df5;
  --color-blue-500: #2266ee;
  --color-blue-600: #1457e8;
  --color-blue-700: #1044bd;
  --color-blue-800: #0e3795;
  --color-blue-900: #0d2f73;
  --color-blue-950: #081d4a;

  /* sky: align to --df-sky */
  --color-sky-300: #7cc8f8;
  --color-sky-400: #38aef4;
  --color-sky-500: #0e9ff0;
  --color-sky-600: #0895ee;
  --color-sky-700: #0778c4;
  --color-sky-800: #0a629c;

  /* indigo participates in brand gradients (login CTA) */
  --color-indigo-400: #6d9af4;
  --color-indigo-500: #2f6bf0;
  --color-indigo-600: #1457e8;
  --color-indigo-700: #1044bd;

  /* purple -> blue-violet so the login CTA becomes the DESIGN.md
     blue-to-violet brand gradient instead of an off-brand purple */
  --color-purple-400: #7d8bf2;
  --color-purple-500: #5560f0;
  --color-purple-600: #4338e8;

  /* semantic tokens (shadcn layer) */
  --border: #dde7f2;
  --input: #d3e0ef;
  --ring: #0895ee;
  --primary: #1457e8;
  --primary-foreground: #f7fafe;
  --muted-foreground: #5f7392;
  --accent: #eef3fa;
  --accent-foreground: #0f2138;
}

/* ---------------------------------------------------------------------
 * 3. Palette re-map — DARK (deep navy creative console)
 *    html.dark (0,1,1) beats bundle .dark (0,1,0); declared after the
 *    light block so it also wins the tie against html:root.
 * ------------------------------------------------------------------ */
html.dark {
  /* stone ladder -> DF navy surface ladder */
  --color-stone-50: #f2f7fd;
  --color-stone-100: #e2ecf9;
  --color-stone-200: #cfdcef;
  --color-stone-300: #b0c2dc;
  --color-stone-400: #8ea4c4;
  --color-stone-500: #6f85a8;
  --color-stone-600: #45608a;
  --color-stone-700: #1b3a5c;
  --color-stone-800: #0e2942;
  --color-stone-900: #06172a;
  --color-stone-950: #001120;

  /* accents keep slightly higher chroma on navy */
  --color-blue-300: #9bc9fb;
  --color-blue-400: #57a8f6;
  --color-blue-500: #2b6ff2;
  --color-blue-600: #1457e8;
  --color-blue-700: #1247c6;
  --color-blue-900: #123468;
  --color-blue-950: #0a2148;

  /* semantic tokens */
  --background: var(--df-surface-0);
  --foreground: var(--df-text-hi);
  --card: var(--df-surface-1);
  --card-foreground: var(--df-text-hi);
  --popover: var(--df-surface-2);
  --popover-foreground: var(--df-text-hi);
  --primary: #2b6ff2;
  --primary-foreground: #f2f7fd;
  --secondary: var(--df-surface-3);
  --secondary-foreground: #e2ecf9;
  --muted: var(--df-surface-3);
  --muted-foreground: var(--df-text-mute);
  --accent: #11304e;
  --accent-foreground: #e2ecf9;
  --border: var(--df-line);
  --input: rgba(148, 197, 255, 0.18);
  --ring: #0895ee;
  --sidebar: var(--df-surface-1);
  --sidebar-border: var(--df-line);
  --sidebar-ring: #0895ee;
}

/* ---------------------------------------------------------------------
 * 4. Page canvas — the <main> radial-gradient arbitrary classes carry
 *    the old warm cream / warm charcoal. Attribute selector re-paints
 *    them without touching markup classes.
 * ------------------------------------------------------------------ */
main[class*="bg-[radial-gradient(circle_at_top_left"] {
  background:
    radial-gradient(circle at top left,
      rgba(255, 255, 255, 0.96),
      rgba(240, 247, 255, 0.98) 42%,
      rgba(231, 241, 252, 1) 100%);
}

html.dark main[class*="bg-[radial-gradient(circle_at_top_left"] {
  background:
    radial-gradient(880px 540px at 12% -4%, rgba(8, 149, 238, 0.14), transparent 60%),
    radial-gradient(720px 480px at 88% 0%, rgba(35, 212, 223, 0.07), transparent 55%),
    radial-gradient(circle at top left,
      rgba(10, 40, 70, 0.92),
      rgba(4, 24, 44, 0.985) 40%,
      var(--df-deep) 100%);
}

/* ---------------------------------------------------------------------
 * 5. Primary actions — DF blue -> sky gradient (DESIGN.md: blue-to-cyan
 *    gradients for primary actions). Color-mix hover kept subtle.
 * ------------------------------------------------------------------ */
.bg-blue-500,
.bg-blue-600 {
  background-image: var(--df-grad-primary);
}

.hover\:bg-blue-600:hover,
.hover\:bg-blue-700:hover,
.hover\:bg-blue-500:hover {
  background-image: var(--df-grad-primary-hover);
}

/* soft brand glow under primary buttons in dark mode (Linear: keep it low) */
html.dark button.bg-blue-500,
html.dark button.bg-blue-600 {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 1px 2px rgba(0, 8, 20, 0.5),
    0 4px 18px rgba(8, 149, 238, 0.22);
}

html.dark button.bg-blue-500:hover,
html.dark button.bg-blue-600:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 1px 2px rgba(0, 8, 20, 0.5),
    0 6px 24px rgba(8, 149, 238, 0.32);
}

/* login CTA gradient endpoints unified to brand */
.ring-blue-500 {
  --tw-ring-color: var(--df-sky);
}

/* ---------------------------------------------------------------------
 * 6. Missing custom shades in the bundle (bg-stone-850 / text-stone-250 /
 *    text-rose-450 have no CSS emitted). Define them on the DF ladder;
 *    they are only used on always-dark player/action surfaces.
 * ------------------------------------------------------------------ */
.bg-stone-850 {
  background-color: var(--df-surface-2);
}

.hover\:bg-stone-850:hover {
  background-color: var(--df-surface-4);
}

.hover\:text-stone-250:hover {
  color: #dae6f6;
}

.hover\:text-rose-450:hover {
  color: #fb6a86;
}

/* ---------------------------------------------------------------------
 * 7. Micro-interaction defaults — Linear-style 150ms color-only motion.
 *    Type-level selectors so any Tailwind transition utility still wins.
 * ------------------------------------------------------------------ */
button,
a,
input,
textarea,
select,
[role="button"] {
  transition-property: color, background-color, border-color, box-shadow, opacity;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  button,
  a,
  input,
  textarea,
  select,
  [role="button"] {
    transition-duration: 0.01ms;
  }
}

/* text selection + caret carry the brand */
::selection {
  background: rgba(8, 149, 238, 0.28);
}

html.dark ::selection {
  background: rgba(8, 149, 238, 0.45);
  color: #f2f7fd;
}

input,
textarea {
  caret-color: var(--df-sky);
}

/* page-shell loading spinner picks up the accent in dark mode
   (!important to outrank the bundle's appended dark text patch) */
html.dark .animate-spin.text-stone-400 {
  color: #4d9df5 !important;
}

/* ---------------------------------------------------------------------
 * 8. Scrollbars — thin, rounded, ladder-toned.
 * ------------------------------------------------------------------ */
* {
  scrollbar-width: thin;
  scrollbar-color: #c3d2e4 transparent;
}

html.dark * {
  scrollbar-color: #24486f transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #c3d2e4;
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #8fa2bd;
  background-clip: content-box;
}

html.dark ::-webkit-scrollbar-thumb {
  background-color: #24486f;
  background-clip: content-box;
}

html.dark ::-webkit-scrollbar-thumb:hover {
  background-color: #2f6bd8;
  background-clip: content-box;
}

/* ---------------------------------------------------------------------
 * 9. Counter-patch — the shipped bundle CSS has appended `!important`
 *    dark-mode rules pinning warm-stone hex values (they bypass the
 *    variable layer). Re-pin the same selectors to the DF navy ladder;
 *    this sheet loads later, so equal-strength !important rules win.
 * ------------------------------------------------------------------ */
.dark .bg-white,
.dark .bg-white\/85,
.dark .bg-white\/90,
.dark .bg-white\/95,
.dark .hover\:bg-white:hover {
  background-color: #0a2035f0 !important;
}

.dark .bg-white\/60,
.dark .bg-white\/70,
.dark .bg-white\/80 {
  background-color: #0c2439c7 !important;
}

.dark .bg-stone-100,
.dark .bg-stone-50,
.dark .bg-stone-50\/70,
.dark .hover\:bg-stone-100:hover,
.dark .hover\:bg-stone-200:hover,
.dark .hover\:bg-stone-50\/70:hover {
  background-color: #0e2942db !important;
}

.dark .bg-stone-200 {
  background-color: #133153e6 !important;
}

.dark .border-stone-100,
.dark .border-stone-100\/50,
.dark .border-stone-100\/80,
.dark .border-stone-200,
.dark .border-stone-200\/70,
.dark .border-stone-300,
.dark .border-white,
.dark .border-white\/70,
.dark .border-white\/80,
.dark .focus-visible\:border-stone-300:focus-visible {
  border-color: rgba(148, 197, 255, 0.16) !important;
}

.dark .text-stone-800,
.dark .text-stone-900,
.dark .text-stone-950 {
  color: #eaf3ff !important;
}

.dark .text-stone-600,
.dark .text-stone-700 {
  color: #c6d6ec !important;
}

.dark .text-stone-400,
.dark .text-stone-500 {
  color: #8ea4c4 !important;
}

.dark .text-stone-300 {
  color: #bfd0e8 !important;
}

.dark .placeholder\:text-muted-foreground::placeholder,
.dark .placeholder\:text-stone-400::placeholder {
  color: #6f85a8 !important;
}

.dark .hover\:text-stone-700:hover,
.dark .hover\:text-stone-800:hover,
.dark .hover\:text-stone-900:hover {
  color: #eaf3ff !important;
}

/* the patch flattens all shadows in dark ([class*=shadow-] -> none);
   keep that Linear-style flatness except the primary-action glow */
html.dark button.bg-blue-500,
html.dark button.bg-blue-600 {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 1px 2px rgba(0, 8, 20, 0.5),
    0 4px 18px rgba(8, 149, 238, 0.22) !important;
}

html.dark button.bg-blue-500:hover,
html.dark button.bg-blue-600:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 1px 2px rgba(0, 8, 20, 0.5),
    0 6px 24px rgba(8, 149, 238, 0.32) !important;
}

/* image route: patch pins html/body to flat #010204 — repaint it as the
   DF deep-navy canvas with faint brand glows (kept dark for artwork) */
html.image-route-active,
html.image-route-active body {
  background-color: #010b16 !important;
}

html.image-route-active body {
  background-image:
    radial-gradient(900px 560px at 10% -6%, rgba(8, 149, 238, 0.10), transparent 60%),
    radial-gradient(760px 500px at 92% -2%, rgba(35, 212, 223, 0.05), transparent 55%) !important;
  background-repeat: no-repeat !important;
}

.bg-\[\#010204\] {
  background-color: #010b16;
}