/* Krebs branding for the Vaultwarden web vault.
   Loaded via Apache (mod_substitute) so it survives container updates.
   navy #283e64 · coral #ff6f6b */

/* ---------- Light theme ---------- */
:root {
  --color-primary-100: 221 227 239;
  --color-primary-600: 40 62 100;
  --color-primary-700: 28 46 79;

  --color-background-alt2: 40 62 100;
  --color-background-alt3: 22 34 58;
  --color-background-alt4: 15 23 41;

  --color-marketing-logo: 40 62 100;
  --color-bw-blue: 40 62 100;

  --color-illustration-outline: 40 62 100;
  --color-illustration-bg-primary: 221 227 239;
  --color-illustration-bg-secondary: 172 187 214;
  --color-illustration-bg-tertiary: 255 255 255;
  --color-illustration-tertiary: 255 111 107;
  --color-illustration-logo: 40 62 100;

  --color-brand-050: #eef1f7;
  --color-brand-100: #dde3ef;
  --color-brand-200: #bcc8de;
  --color-brand-300: #a9bde3;
  --color-brand-400: #8aa4d6;
  --color-brand-500: #4f6a99;
  --color-brand-600: #344f80;
  --color-brand-700: #283e64;
  --color-brand-800: #1e3050;
  --color-brand-900: #16233c;
  --color-brand-950: #0e1729;
  --color-brand-950-rgb: 14, 23, 41;
}

/* ---------- Dark theme ---------- */
.theme_dark {
  --color-primary-100: 33 48 80;
  --color-primary-300: 52 78 130;
  --color-primary-600: 154 175 210;
  --color-primary-700: 190 205 228;

  --color-illustration-outline: 154 175 210;
  --color-illustration-bg-primary: 190 205 228;
  --color-illustration-bg-secondary: 124 146 186;
  --color-illustration-bg-tertiary: 243 246 249;
  --color-illustration-tertiary: 255 111 107;
  --color-illustration-logo: 255 255 255;
}

/* ---------- Logo on login / landing pages ---------- */
bit-landing-header a > bit-svg > svg {
  display: none;
}
bit-landing-header a > bit-svg {
  display: block;
  width: 100%;
  aspect-ratio: 1905 / 353;
  background: url("/brand/logo.png?v=1") left center / contain no-repeat;
}
.theme_dark bit-landing-header a > bit-svg {
  background-image: url("/brand/logo-light.png?v=1");
}

/* ---------- Logo and colour in the logged-in app navigation ---------- */
:root {
  --color-nav-bg-primary: #16233c;
  --color-nav-bg-primary-strong: #0e1729;
}
bit-nav-logo a > bit-svg > svg {
  display: none;
}
bit-nav-logo a > bit-svg {
  display: block;
  width: 200px;
  height: 100%;
  background: url("/brand/logo-light.png?v=3") left center / contain no-repeat;
}
/* collapsed side navigation: icon only */
bit-nav-logo a.\!tw-h-\[55px\] > bit-svg {
  width: 30px;
  background-image: url("/brand/mark-light.png?v=3");
}