/* cruelty-vaultwarden.css - Bitwarden web vault overrides using BEEF cruelty palette */

/* ===================================================================
 * LOGO OVERRIDES
 * Bitwarden's logos are compiled into JS bundles; hide them with CSS
 * and replace via background-image using our vault mascot.
 * All four placement sites:
 *   1. Header brand logo  (bit-svg[aria-label="Bitwarden logo"])
 *   2. Sidebar nav logo   (a[title="Password Manager"] bit-svg)
 *   3+4. Home-screen product tile icons (.tw-mx-auto.tw-content-center > bit-svg)
 * =================================================================== */

/* 1. Header brand logo */
bit-svg[aria-label="Bitwarden logo"] > svg { display: none; }
bit-svg[aria-label="Bitwarden logo"] {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background-image: url("images/logo.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* 2. Sidebar nav "Password Manager" text logo */
a[title="Password Manager"] bit-svg[aria-hidden="true"] > svg { display: none; }
a[title="Password Manager"] bit-svg[aria-hidden="true"] {
  position: absolute;
  inset: 0.6875rem;
  width: auto;
  display: block;
  background-image: url("images/logo.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* 3+4. Home-screen product tile icons */
.tw-mx-auto.tw-content-center > bit-svg[aria-hidden="true"] > svg { display: none; }
.tw-mx-auto.tw-content-center > bit-svg[aria-hidden="true"] {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 5rem;
  background-image: url("images/logo.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
:root {
  /* ========================================
   * LEGACY COLORS (RGB format)
   * These are the original colors used throughout the app.
   * Use these for existing components until migration is complete.
   * ======================================== */

  --color-transparent-hover: rgb(0 0 0 / 0.02);
  --color-shadow: 168 157 154;

  --color-background: 255 255 255;
  --color-background-alt: 247 242 241;
  --color-background-alt2: 155 0 0;
  --color-background-alt3: 33 37 41; /* bg of menu panel */
  --color-background-alt4: 16 18 21; /* bg of active menu item */

  --color-primary-100: 255 210 205;
  --color-primary-300: 108 91 88; /* hover of menu items */
  --color-primary-600: 155 0 0; /* color of links and buttons */
  --color-primary-700: 128 0 0; /* hover of links and buttons */

  --color-secondary-100: 237 231 229;
  --color-secondary-300: 186 175 172;
  --color-secondary-500: 107 91 88;
  --color-secondary-600: 93 75 72;
  --color-secondary-700: 71 57 54;

  --color-info-100: 219 229 246;
  --color-info-600: 121 161 233;
  --color-info-700: 13 36 123;

  --color-warning-100: 255 244 212;
  --color-warning-600: 255 191 0;
  --color-warning-700: 142 64 0;

  --color-danger-100: 255 236 239;
  --color-danger-600: 203 38 58;
  --color-danger-700: 149 27 42;

  --color-success-100: 213 243 216;
  --color-success-600: 12 128 24;
  --color-success-700: 8 81 15;

  --color-notification-100: 255 225 247;
  --color-notification-600: 192 17 118;

  --color-text-main: 27 32 41;
  --color-text-muted: 96 80 77;
  --color-text-contrast: 255 255 255;
  --color-text-alt2: 255 255 255;
  --color-text-code: 192 17 118;

  --color-hover-default: rgb(155 0 0 / 0.1);
  --color-hover-contrast: rgb(255 255 255 / 0.15);

  --color-marketing-logo: 15 15 15; /* The Vaultwarden Logo */
  --color-bw-blue: 155 0 0;

  --tw-ring-offset-color: #ffffff;

  --tw-sm-breakpoint: 640px;

  --color-illustration-outline: 50 0 0;
  --color-illustration-bg-primary: 255 210 205;
  --color-illustration-bg-secondary: 255 175 165;
  --color-illustration-bg-tertiary: 255 255 255;
  --color-illustration-tertiary: 255 191 0;
  --color-illustration-logo: 155 0 0;

  /* ========================================
   * NEW COLOR PALETTE (Hex format)
   * These colors are from the new Figma design system.
   * Use these for new components and features.
   * Format: --color-{family}-{shade} where shade ranges from 050 to 950
   * ======================================== */

  /* Brand Colors */
  --color-brand-050: #fff2f0;
  --color-brand-100: #fde0db;
  --color-brand-200: #fbbcb4;
  --color-brand-300: #f58d81;
  --color-brand-400: #e85c4d;
  --color-brand-500: #cc2a1a;
  --color-brand-600: #a80e00;
  --color-brand-700: #9b0000;
  --color-brand-800: #7d0000;
  --color-brand-900: #5c0000;
  --color-brand-950: #3a0000;
  --color-brand-950-rgb: 58, 0, 0;

  /* Gray Colors */
  --color-gray-050: #f2f6fa;
  --color-gray-100: #e6ecf2;
  --color-gray-200: #d5dde8;
  --color-gray-300: #b4c2d4;
  --color-gray-400: #8496b0;
  --color-gray-400-rgb: 132, 150, 176;
  --color-gray-500: #62748e;
  --color-gray-600: #45556c;
  --color-gray-700: #314158;
  --color-gray-800: #1d293d;
  --color-gray-900: #0f172b;
  --color-gray-950: #020618;
  --color-gray-950-rgb: 2, 6, 24;

  /* Red Colors */
  --color-red-050: #fef2f2;
  --color-red-100: #ffe2e2;
  --color-red-200: #ffc9c9;
  --color-red-300: #ffa2a2;
  --color-red-400: #ff6467;
  --color-red-500: #fb2c36;
  --color-red-600: #e7000b;
  --color-red-700: #c10007;
  --color-red-800: #9f0712;
  --color-red-900: #791112;
  --color-red-950: #460809;

  /* Orange Colors */
  --color-orange-050: #fff8f1;
  --color-orange-100: #feecdc;
  --color-orange-200: #fcd9bd;
  --color-orange-300: #fdba8c;
  --color-orange-400: #ff894a;
  --color-orange-500: #fa6216;
  --color-orange-600: #cc4400;
  --color-orange-700: #b23300;
  --color-orange-800: #8a2203;
  --color-orange-900: #631c04;
  --color-orange-950: #441600;

  /* Yellow Colors */
  --color-yellow-050: #fefce8;
  --color-yellow-100: #fef9c2;
  --color-yellow-200: #fff085;
  --color-yellow-300: #ffdf20;
  --color-yellow-400: #fdc700;
  --color-yellow-500: #f0b100;
  --color-yellow-600: #d08700;
  --color-yellow-700: #a65f00;
  --color-yellow-800: #894b00;
  --color-yellow-900: #733e0a;
  --color-yellow-950: #432004;

  /* Green Colors */
  --color-green-050: #f0fdf4;
  --color-green-100: #dcfce7;
  --color-green-200: #b9f8cf;
  --color-green-300: #7bf1a8;
  --color-green-400: #18dc7a;
  --color-green-500: #0abf52;
  --color-green-600: #00a63e;
  --color-green-700: #008236;
  --color-green-800: #016630;
  --color-green-900: #0d542b;
  --color-green-950: #032e15;

  /* Pink Colors */
  --color-pink-050: #fdf2f8;
  --color-pink-100: #fce7f3;
  --color-pink-200: #fccee8;
  --color-pink-300: #fda5d5;
  --color-pink-400: #fb64b6;
  --color-pink-500: #f6339a;
  --color-pink-600: #e60076;
  --color-pink-700: #c6005c;
  --color-pink-800: #a3004c;
  --color-pink-900: #861043;
  --color-pink-950: #510424;

  /* Coral Colors */
  --color-coral-050: #fff2f0;
  --color-coral-100: #ffe0dc;
  --color-coral-200: #ffc1b9;
  --color-coral-300: #ff9585;
  --color-coral-400: #ff6550;
  --color-coral-500: #ff4026;
  --color-coral-600: #e11f05;
  --color-coral-700: #c71800;
  --color-coral-800: #a81400;
  --color-coral-900: #7e0f00;
  --color-coral-950: #4d0900;

  /* Teal Colors */
  --color-teal-050: #ecfeff;
  --color-teal-100: #cefafe;
  --color-teal-200: #a2f4fd;
  --color-teal-300: #70ecf5;
  --color-teal-400: #2cdde9;
  --color-teal-500: #00c5db;
  --color-teal-600: #009cb8;
  --color-teal-700: #007c95;
  --color-teal-800: #006278;
  --color-teal-900: #0f495c;
  --color-teal-950: #042e3e;

  /* Purple Colors */
  --color-purple-050: #faf5ff;
  --color-purple-100: #f3e8ff;
  --color-purple-200: #e9d4ff;
  --color-purple-300: #dab2ff;
  --color-purple-400: #c27aff;
  --color-purple-500: #ad46ff;
  --color-purple-600: #9810fa;
  --color-purple-700: #8200db;
  --color-purple-800: #6e11b0;
  --color-purple-900: #59168b;
  --color-purple-950: #3c0366;

  /* White and Black */
  --color-white: #ffffff;
  --color-white-rgb: 255, 255, 255;
  --color-black: #000000;
  --color-black-rgb: 0, 0, 0;

  /* ========================================
   * SEMANTIC FOREGROUND COLORS (Light Mode)
   * These are the tokens that should be exposed to Tailwind
   * They reference the primitive colors above
   * ======================================== */

  /* Neutral Foreground */
  --color-fg-white: var(--color-white);
  --color-fg-dark: var(--color-gray-900);
  --color-fg-contrast: var(--color-white);
  --color-fg-contrast-strong: var(--color-gray-200);
  --color-fg-heading: var(--color-gray-900);
  --color-fg-body: var(--color-gray-600);
  --color-fg-body-subtle: var(--color-gray-500);
  --color-fg-disabled: var(--color-gray-400);

  /* Brand Foreground */
  --color-fg-brand-soft: var(--color-brand-200);
  --color-fg-brand: var(--color-brand-700);
  --color-fg-brand-strong: var(--color-brand-800);

  /* Status Foreground */
  --color-fg-success: var(--color-green-700);
  --color-fg-success-strong: var(--color-green-800);
  --color-fg-danger: var(--color-red-700);
  --color-fg-danger-strong: var(--color-red-800);
  --color-fg-warning: var(--color-orange-600);
  --color-fg-warning-strong: var(--color-orange-700);
  --color-fg-sensitive: var(--color-pink-600);

  /* Accent Foreground */
  --color-fg-accent-primary-soft: var(--color-teal-200);
  --color-fg-accent-primary: var(--color-teal-400);
  --color-fg-accent-primary-strong: var(--color-teal-800);
  --color-fg-accent-secondary-soft: var(--color-coral-200);
  --color-fg-accent-secondary: var(--color-coral-400);
  --color-fg-accent-secondary-strong: var(--color-coral-900);
  --color-fg-accent-tertiary-soft: var(--color-purple-200);
  --color-fg-accent-tertiary: var(--color-purple-700);
  --color-fg-accent-tertiary-strong: var(--color-purple-900);

  /* ========================================
   * SEMANTIC BACKGROUND COLORS (Light Mode)
   * ======================================== */

  /* Neutral Background */
  --color-bg-white: var(--color-white);
  --color-bg-dark: var(--color-gray-800);
  --color-bg-primary: var(--color-white);
  --color-bg-secondary: var(--color-gray-050);
  --color-bg-tertiary: var(--color-gray-050);
  --color-bg-quaternary: var(--color-gray-200);
  --color-bg-disabled: var(--color-gray-100);

  /* Gray Background */
  --color-bg-gray: var(--color-gray-300);
  --color-bg-gray-strong: var(--color-gray-500);

  /* Contrast Background */
  --color-bg-contrast-soft: var(--color-gray-700);
  --color-bg-contrast: var(--color-gray-800);
  --color-bg-contrast-strong: var(--color-gray-950);

  /* Brand Background */
  --color-bg-brand-softer: var(--color-brand-050);
  --color-bg-brand-soft: var(--color-brand-100);
  --color-bg-brand-medium: var(--color-brand-200);
  --color-bg-brand: var(--color-brand-700);
  --color-bg-brand-strong: var(--color-brand-800);
  --color-bg-brand-stronger: var(--color-brand-900);

  /* Status Background */
  --color-bg-success-soft: var(--color-green-050);
  --color-bg-success-medium: var(--color-green-100);
  --color-bg-success: var(--color-green-700);
  --color-bg-success-strong: var(--color-green-800);
  --color-bg-danger-soft: var(--color-red-050);
  --color-bg-danger-medium: var(--color-red-100);
  --color-bg-danger: var(--color-red-700);
  --color-bg-danger-strong: var(--color-red-800);
  --color-bg-warning-soft: var(--color-orange-050);
  --color-bg-warning-medium: var(--color-orange-100);
  --color-bg-warning: var(--color-orange-600);
  --color-bg-warning-strong: var(--color-orange-700);

  /* Accent Background */
  --color-bg-accent-primary-soft: var(--color-teal-050);
  --color-bg-accent-primary-medium: var(--color-teal-100);
  --color-bg-accent-primary: var(--color-teal-400);
  --color-bg-accent-primary-strong: var(--color-teal-700);
  --color-bg-accent-secondary-soft: var(--color-coral-050);
  --color-bg-accent-secondary-medium: var(--color-coral-100);
  --color-bg-accent-secondary: var(--color-coral-400);
  --color-bg-accent-tertiary-soft: var(--color-purple-050);
  --color-bg-accent-tertiary-medium: var(--color-purple-100);
  --color-bg-accent-tertiary: var(--color-purple-600);

  /* Avatar Background */
  --color-bg-avatar-teal: var(--color-teal-700);
  --color-bg-avatar-teal-hover: var(--color-teal-800);
  --color-bg-avatar-coral: var(--color-coral-700);
  --color-bg-avatar-coral-hover: var(--color-coral-800);
  --color-bg-avatar-brand: var(--color-brand-700);
  --color-bg-avatar-brand-hover: var(--color-brand-800);
  --color-bg-avatar-green: var(--color-green-700);
  --color-bg-avatar-green-hover: var(--color-green-800);
  --color-bg-avatar-purple: var(--color-purple-700);
  --color-bg-avatar-purple-hover: var(--color-purple-800);

  /* Hover & Overlay */
  --color-bg-hover: rgba(var(--color-gray-950-rgb), 0.05);
  --color-bg-hover-contrast: rgba(var(--color-white-rgb), 0.05);
  --color-bg-overlay: rgba(var(--color-gray-950-rgb), 0.3);

  /* ========================================
   * SEMANTIC BORDER COLORS (Light Mode)
   * ======================================== */

  /* Neutral Border */
  --color-border-muted: var(--color-gray-050);
  --color-border-light: var(--color-gray-100);
  --color-border-base: var(--color-gray-200);
  --color-border-strong: var(--color-gray-400);
  --color-border-stronger: var(--color-gray-800);
  --color-border-buffer: var(--color-white);

  /* Brand Border */
  --color-border-brand-soft: var(--color-brand-200);
  --color-border-brand: var(--color-brand-700);
  --color-border-brand-strong: var(--color-brand-900);

  /* Status Border */
  --color-border-success-soft: var(--color-green-200);
  --color-border-success: var(--color-green-700);
  --color-border-success-strong: var(--color-green-900);
  --color-border-danger-soft: var(--color-red-200);
  --color-border-danger: var(--color-red-700);
  --color-border-danger-strong: var(--color-red-800);
  --color-border-warning-soft: var(--color-orange-200);
  --color-border-warning: var(--color-orange-600);
  --color-border-warning-strong: var(--color-orange-700);

  /* Accent Border */
  --color-border-accent-primary-soft: var(--color-teal-200);
  --color-border-accent-primary: var(--color-teal-600);
  --color-border-accent-secondary-soft: var(--color-coral-200);
  --color-border-accent-secondary: var(--color-coral-600);
  --color-border-accent-tertiary-soft: var(--color-purple-200);
  --color-border-accent-tertiary: var(--color-purple-600);

  /* Focus Border */
  --color-border-focus: var(--color-black);
  --color-border-focus-contrast: var(--color-white);

  /**========================================
   * SIDENAV CUSTOM COLORS (Light mode)
   * ======================================== */

  /* Sidenav Foreground */
  --color-nav-fg-primary: var(--color-white);
  --color-nav-fg-secondary: var(--color-gray-900);

  /* Sidenav Background */
  --color-nav-bg-primary: #212529;
  --color-nav-bg-secondary: var(--color-gray-100);
  --color-nav-bg-primary-strong: #101215;
  --color-nav-bg-secondary-strong: var(--color-gray-300);

  /* Sidenav Hover */
  --color-nav-bg-primary-hover: rgba(var(--color-black-rgb), 0.2);
  --color-nav-bg-secondary-hover: rgba(var(--color-brand-950-rgb), 0.1);
  --color-nav-bg-primary-hover-strong: rgba(var(--color-black-rgb), 0.45);
  --color-nav-bg-secondary-hover-strong: rgba(var(--color-brand-950-rgb), 0.25);

  /* Sidenav Border */
  --color-nav-border-primary: var(--color-brand-700);
  --color-nav-border-secondary: var(--color-gray-200);
  --color-nav-border-primary-focus: var(--color-white);
  --color-nav-border-secondary-focus: var(--color-black);
}

.theme_dark {
  --color-transparent-hover: rgb(255 255 255 / 0.02);
  --color-shadow: 0 0 0;

  /* Beef background depth */
  --color-background: 30 19 18; /* surface-container-low */
  --color-background-alt: 42 30 29; /* surface-container-base */
  --color-background-alt2: 155 0 0; /* Beef primary */
  --color-background-alt3: 60 47 46; /* surface-container-high */
  --color-background-alt4: 81 68 66; /* surface-container-highest */

  /* Rich Beef Reds */
  --color-primary-100: 255 205 197; /* on-primary-container */
  --color-primary-300: 220 100 88; /* visible red for hover indicators on dark bg */
  --color-primary-600: 155 0 0; /* Beef primary (button bg, white text on it is fine) */
  --color-primary-700: 128 0 0; /* Beef primary darker */

  /* Muted to match Beef */
  --color-secondary-100: 75 29 32;
  --color-secondary-300: 255 142 151;
  --color-secondary-500: 255 163 170;
  --color-secondary-600: 255 184 189;
  --color-secondary-700: 255 204 205;

  --color-success-100: 13 55 26;
  --color-success-600: 97 219 131;
  --color-success-700: 190 236 198;

  --color-danger-100: 75 29 27;
  --color-danger-600: 255 137 129;
  --color-danger-700: 255 205 199;

  --color-warning-100: 70 36 0;
  --color-warning-600: 246 171 102;
  --color-warning-700: 255 212 175;

  --color-info-100: 28 44 81;
  --color-info-600: 131 185 255;
  --color-info-700: 199 222 255;

  --color-notification-100: 74 29 42;
  --color-notification-600: 255 134 176;

  /* Beef Texts */
  --color-text-main: 250 234 232;
  --color-text-muted: 229 197 193;
  --color-text-contrast: 255 255 255; /* Force light contrast on buttons */
  --color-text-alt2: 255 255 255;
  --color-text-code: 255 134 176;

  --color-hover-default: rgb(155 0 0 / 0.1);
  --color-hover-contrast: rgb(250 234 232 / 0.15);

  --color-marketing-logo: 250 234 232;
  --color-bw-blue: 155 0 0;

  --tw-ring-offset-color: #0b0403;

  /* Illustration Beef overrides */
  --color-illustration-outline: 155 0 0;
  --color-illustration-bg-primary: 75 30 25;
  --color-illustration-bg-secondary: 75 29 32;
  --color-illustration-bg-tertiary: 30 19 18;
  --color-illustration-tertiary: 0 222 213;
  --color-illustration-logo: 250 234 232;

  /* ========================================
   * SEMANTIC FOREGROUND COLORS (Dark Mode Overrides)
   * ======================================== */

  --color-fg-contrast: #1e1312;
  --color-fg-contrast-strong: #6a5250;
  --color-fg-heading: #f5ecea;
  --color-fg-body: #e5d5d1;
  --color-fg-body-subtle: #a08480;
  --color-fg-disabled: #6a5250;

  /* Brand Foreground */
  --color-fg-brand-soft: var(--color-brand-400);
  --color-fg-brand: #ff897b;
  --color-fg-brand-strong: #ffbeb4;

  /* Status Foreground */
  --color-fg-success: var(--color-green-400);
  --color-fg-success-strong: var(--color-green-200);
  --color-fg-danger: var(--color-red-400);
  --color-fg-danger-strong: var(--color-red-200);
  --color-fg-warning: var(--color-orange-400);
  --color-fg-warning-strong: var(--color-orange-200);
  --color-fg-sensitive: var(--color-pink-300);

  /* Accent Foreground */
  --color-fg-accent-primary-soft: var(--color-teal-400);
  --color-fg-accent-primary: var(--color-teal-300);
  --color-fg-accent-primary-strong: var(--color-teal-100);
  --color-fg-accent-secondary-soft: var(--color-coral-500);
  --color-fg-accent-secondary: var(--color-coral-400);
  --color-fg-accent-secondary-strong: var(--color-coral-100);
  --color-fg-accent-tertiary-soft: var(--color-purple-500);
  --color-fg-accent-tertiary: var(--color-purple-400);
  --color-fg-accent-tertiary-strong: var(--color-purple-100);

  /* ========================================
   * SEMANTIC BACKGROUND COLORS (Dark Mode Overrides)
   * ======================================== */

  --color-bg-primary: #1e1312;
  --color-bg-secondary: #2a1e1d;
  --color-bg-tertiary: #0b0403;
  --color-bg-quaternary: #3c2f2e;
  --color-bg-disabled: #2a1e1d;

  --color-bg-gray: #7d6560;
  --color-bg-gray-strong: #a08480;

  --color-bg-contrast-soft: #e5d5d1;
  --color-bg-contrast: #ede5e3;
  --color-bg-contrast-strong: var(--color-white);

  /* Brand Background - Explicitly setting to the rich red */
  --color-bg-brand: #9b0000;
  --color-bg-brand-softer: var(--color-brand-950);
  --color-bg-brand-soft: var(--color-brand-900);
  --color-bg-brand-medium: var(--color-brand-800);
  --color-bg-brand-strong: var(--color-brand-200);
  --color-bg-brand-stronger: var(--color-brand-100);

  /* Status Background */
  --color-bg-success-soft: var(--color-green-950);
  --color-bg-success-medium: var(--color-green-900);
  --color-bg-success: var(--color-green-400);
  --color-bg-success-strong: var(--color-green-200);
  --color-bg-danger-soft: var(--color-red-950);
  --color-bg-danger-medium: var(--color-red-900);
  --color-bg-danger: var(--color-red-400);
  --color-bg-danger-strong: var(--color-red-200);
  --color-bg-warning-soft: var(--color-orange-950);
  --color-bg-warning-medium: var(--color-orange-900);
  --color-bg-warning: var(--color-orange-400);
  --color-bg-warning-strong: var(--color-orange-200);

  /* Accent Background */
  --color-bg-accent-primary-soft: var(--color-teal-950);
  --color-bg-accent-primary-medium: var(--color-teal-900);
  --color-bg-accent-primary: var(--color-teal-400);
  --color-bg-accent-primary-strong: var(--color-teal-200);
  --color-bg-accent-secondary-soft: var(--color-coral-950);
  --color-bg-accent-secondary-medium: var(--color-coral-900);
  --color-bg-accent-secondary: var(--color-coral-400);
  --color-bg-accent-tertiary-soft: var(--color-purple-950);
  --color-bg-accent-tertiary-medium: var(--color-purple-900);
  --color-bg-accent-tertiary: var(--color-purple-600);

  /* Avatar Background */
  --color-bg-avatar-teal: var(--color-teal-700);
  --color-bg-avatar-teal-hover: var(--color-teal-600);
  --color-bg-avatar-coral: var(--color-coral-700);
  --color-bg-avatar-coral-hover: var(--color-coral-600);
  --color-bg-avatar-brand: var(--color-brand-700);
  --color-bg-avatar-brand-hover: var(--color-brand-600);
  --color-bg-avatar-green: var(--color-green-700);
  --color-bg-avatar-green-hover: var(--color-green-600);
  --color-bg-avatar-purple: var(--color-purple-700);
  --color-bg-avatar-purple-hover: var(--color-purple-600);

  /* Hover & Overlay */
  --color-bg-hover: rgba(var(--color-white-rgb), 0.05);
  --color-bg-hover-contrast: rgba(11, 4, 3, 0.05);
  --color-bg-overlay: rgba(11, 4, 3, 0.85);

  /* ========================================
   * SEMANTIC BORDER COLORS (Dark Mode Overrides)
   * ======================================== */

  --color-border-muted: #1e1312;
  --color-border-light: #2a1e1d;
  --color-border-base: #4f3935;
  --color-border-strong: #7d6560;
  --color-border-stronger: #a08480;
  --color-border-buffer: #0b0403;

  /* Brand Border */
  --color-border-brand: #cc4040;
  --color-border-brand-soft: var(--color-brand-800);
  --color-border-brand-strong: var(--color-brand-200);

  /* Status Border */
  --color-border-success-soft: var(--color-green-800);
  --color-border-success: var(--color-green-400);
  --color-border-success-strong: var(--color-green-200);
  --color-border-danger-soft: var(--color-red-800);
  --color-border-danger: var(--color-red-400);
  --color-border-danger-strong: var(--color-red-200);
  --color-border-warning-soft: var(--color-orange-800);
  --color-border-warning: var(--color-orange-400);
  --color-border-warning-strong: var(--color-orange-200);

  /* Accent Border */
  --color-border-accent-primary-soft: var(--color-teal-800);
  --color-border-accent-secondary-soft: var(--color-coral-800);
  --color-border-accent-secondary: var(--color-coral-500);
  --color-border-accent-tertiary-soft: var(--color-purple-800);
  --color-border-accent-tertiary: var(--color-purple-500);

  /* Focus Border */
  --color-border-focus: var(--color-white);
  --color-border-focus-contrast: var(--color-black);

  /**========================================
    * SIDENAV CUSTOM COLORS (Dark mode)
    * ======================================== */

  --color-nav-fg-primary: var(--color-white);
  --color-nav-fg-secondary: var(--color-white);

  --color-nav-bg-primary: #2a1e1d;
  --color-nav-bg-secondary: #2a1e1d;
  --color-nav-bg-primary-strong: #4f3935;
  --color-nav-bg-secondary-strong: #4f3935;

  --color-nav-bg-primary-hover: rgba(160, 132, 128, 0.2);
  --color-nav-bg-secondary-hover: rgba(160, 132, 128, 0.2);
  --color-nav-bg-primary-hover-strong: rgba(160, 132, 128, 0.6);
  --color-nav-bg-secondary-hover-strong: rgba(160, 132, 128, 0.6);

  --color-nav-border-primary: #4f3935;
  --color-nav-border-secondary: #4f3935;
  --color-nav-border-primary-focus: var(--color-white);
  --color-nav-border-secondary-focus: var(--color-white);
}