/* ============================================================
   FIRE theme — vault.sanicanin.xyz (Vaultwarden web vault).
   Served by the sanicanin-nginx container (file lives in the
   bind-mounted /var/www/html webroot) and injected into
   Vaultwarden HTML via nginx sub_filter (see the vault server
   block). Loaded AFTER the app's stylesheets, so the variable
   redefinitions cascade over the stock palettes. Vaultwarden's
   web vault defines its palette as space-separated RGB triplets
   under :root (light default) and .theme_dark — we restyle BOTH
   so the fire look holds whatever theme the client picks.
   Palette mirrors the launcher fire.css:
   bg #0b0908 · panels #14100b/#1e1711 · gold #ffc46b ·
   orange #ff9f43 · ember #ff5e3a · text #f6f1ea/#b3a99b.
   Bump ?v= in the injected link on change (nginx serves the file
   by path, the query is just a cache-buster for the browser).
   ============================================================ */

html { color-scheme: dark; }

body {
  font-family: "Inter", "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* warm aurora over the dark base — same feel as the launcher */
  background:
    radial-gradient(1100px 650px at 82% -10%, rgba(255, 94, 58, 0.12), transparent 60%),
    radial-gradient(900px 600px at 8% 25%, rgba(255, 159, 67, 0.08), transparent 55%),
    radial-gradient(1000px 700px at 50% 115%, rgba(255, 80, 45, 0.06), transparent 60%),
    #0b0908;
  background-attachment: fixed;
}

h1, h2, h3, h4, h5 { font-family: "Space Grotesk", "Inter", sans-serif; }

::selection { background: rgba(255, 159, 67, 0.35); }

a { transition: color .2s ease; }

/* warm scrollbars (matches launcher) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2a2118; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #3a2f22; }

/* ============ Vaultwarden design-token overrides ============
   Both the light (:root) and dark (.theme_dark) scopes get the
   same fire palette — the family look is dark, so we force it. */
:root,
.theme_dark {
  --color-transparent-hover: rgb(255 255 255 / 0.03);
  --color-shadow: 0 0 0;

  --color-background: 11 9 8;        /* page bg        #0b0908 */
  --color-background-alt: 20 16 11;  /* panels         #14100b */
  --color-background-alt2: 30 23 17; /* raised panels  #1e1711 */
  --color-background-alt3: 42 33 24; /* hover fills    #2a2118 */
  --color-background-alt4: 16 13 10; /* active item    #100d09 */

  --color-primary-100: 58 42 26;     /* subtle warm fill        */
  --color-primary-300: 92 68 40;     /* menu hover              */
  --color-primary-600: 255 159 67;   /* main accent = orange    */
  --color-primary-700: 255 94 58;    /* hover = ember           */

  --color-secondary-100: 42 33 24;
  --color-secondary-300: 63 50 36;
  --color-secondary-500: 140 118 92;
  --color-secondary-600: 155 130 102;
  --color-secondary-700: 179 150 116;

  --color-info-100: 26 39 78;        /* keep info blue-ish for  */
  --color-info-600: 121 161 233;     /* semantics, dimmed       */
  --color-info-700: 219 229 246;

  --color-warning-100: 42 33 24;
  --color-warning-600: 255 196 107;  /* gold #ffc46b            */
  --color-warning-700: 255 248 228;

  --color-danger-100: 42 20 18;
  --color-danger-600: 255 107 94;    /* soft ember red          */
  --color-danger-700: 255 236 239;

  --color-success-100: 18 37 26;
  --color-success-600: 127 216 155;  /* family green #7fd89b    */
  --color-success-700: 191 236 195;

  --color-notification-100: 42 33 24;
  --color-notification-600: 255 143 208;
  --color-notification-700: 255 236 239;

  --color-art-primary: 246 241 234;
  --color-art-accent: 255 196 107;

  --color-text-main: 246 241 234;    /* #f6f1ea                 */
  --color-text-muted: 179 169 155;   /* #b3a99b                 */
  --color-text-contrast: 26 15 5;    /* dark text on orange     */
  --color-text-alt2: 246 241 234;
  --color-text-code: 255 196 107;

  --color-marketing-logo: 246 241 234;
  --tw-ring-offset-color: #14100b;
}

/* Legacy Bootstrap-era tokens (the frontend/login page uses these) */
:root {
  --primary: #ff9f43;
  --primary-accent: #ff5e3a;
  --secondary: #3f3224;
  --secondary-alt: #2a2118;
  --success: #7fd89b;
  --danger: #ff6b5e;
  --warning: #ffc46b;
  --info: #79a1e9;
  --light: #1e1711;
  --dark: #14100b;
  --font-family-sans-serif: "Inter", "DM Sans", system-ui, -apple-system,
    "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
}

/* ============ structural polish ============ */

/* Primary buttons: warm gradient like the launcher CTA */
.btn-primary,
button[bitButton][variant="primary"],
a[bitButton][variant="primary"] {
  background-image: linear-gradient(100deg, #ffc46b, #ff9f43 45%, #ff5e3a);
  border-color: transparent;
  color: #1a0f05;
}

/* Subtle translucent panels over the aurora */
.tw-bg-background {
  background-color: rgb(var(--color-background) / 0.86);
}

/* Vaultwarden brand mark: keep the logo glyph, tint it warm */
.new-logo-themed { filter: hue-rotate(0deg) saturate(0.9); }

/* Frontend marketing page: keep the hero legible on dark */
.layout_frontend .logo,
.layout_frontend .brand {
  filter: brightness(0.9);
}