/* Catppuccin Mocha theme override for Vaultwarden web vault, Pink accent
   Palette reference: https://github.com/catppuccin/catppuccin */
body.layout_frontend {
  /* ---- OLD token system (rgb triplets) ---- */
  --color-background: 30 30 46;          /* Base 1e1e2e */
  --color-background-alt: 24 24 37;      /* Mantle 181825 */
  --color-background-alt2: 245 194 231;  /* Pink f5c2e7 */
  --color-background-alt3: 49 50 68;     /* Surface0 313244 */
  --color-background-alt4: 17 17 27;     /* Crust 11111b */

  --color-primary-100: 88 44 74;
  --color-primary-300: 203 166 247;      /* Mauve cba6f7 */
  --color-primary-600: 245 194 231;      /* Pink f5c2e7 */
  --color-primary-700: 240 165 217;

  --color-secondary-100: 49 50 68;
  --color-secondary-300: 88 91 112;      /* Surface2 585b70 */
  --color-secondary-500: 127 132 156;    /* Overlay1 7f849c */
  --color-secondary-600: 166 173 200;    /* Subtext0 a6adc8 */
  --color-secondary-700: 205 214 244;    /* Text cdd6f4 */

  --color-info-100: 20 61 84;
  --color-info-600: 137 220 235;         /* Sky 89dceb */
  --color-info-700: 116 199 236;         /* Sapphire 74c7ec */

  --color-warning-100: 78 61 30;
  --color-warning-600: 249 226 175;      /* Yellow f9e2af */
  --color-warning-700: 250 179 135;      /* Peach fab387 */

  --color-danger-100: 76 30 40;
  --color-danger-600: 243 139 168;       /* Red f38ba8 */
  --color-danger-700: 235 160 172;       /* Maroon eba0ac */

  --color-success-100: 27 62 30;
  --color-success-600: 166 227 161;      /* Green a6e3a1 */
  --color-success-700: 148 226 213;      /* Teal 94e2d5 */

  --color-notification-100: 78 40 62;
  --color-notification-600: 245 194 231; /* Pink f5c2e7 */

  --color-text-main: 205 214 244;        /* Text cdd6f4 */
  --color-text-muted: 166 173 200;       /* Subtext0 a6adc8 */
  --color-text-contrast: 30 30 46;       /* Base, for text on bright/brand bg */
  --color-text-alt2: 30 30 46;
  --color-text-code: 245 194 231;        /* Pink */

  --color-hover-default: rgb(245 194 231 / 0.1);
  --color-hover-contrast: rgb(30 30 46 / 0.15);

  /* ---- NEW hex-based semantic system ---- */
  --color-white: #1e1e2e;
  --color-white-rgb: 30, 30, 46;
  --color-black: #cdd6f4;

  --color-gray-050: #cdd6f4; /* Text (lightest role) */
  --color-gray-100: #bac2de; /* Subtext1 */
  --color-gray-200: #a6adc8; /* Subtext0 */
  --color-gray-300: #9399b2; /* Overlay2 */
  --color-gray-400: #7f849c; /* Overlay1 */
  --color-gray-400-rgb: 127, 132, 156;
  --color-gray-500: #6c7086; /* Overlay0 */
  --color-gray-600: #585b70; /* Surface2 */
  --color-gray-700: #45475a; /* Surface1 */
  --color-gray-800: #313244; /* Surface0 */
  --color-gray-900: #181825; /* Mantle (darkest role) */
  --color-gray-950: #11111b; /* Crust */
  --color-gray-950-rgb: 17, 17, 27;

  --color-brand-050: #4e2c47;
  --color-brand-100: #6b3a61;
  --color-brand-600: #f5c2e7;
  --color-brand-700: #f5c2e7;
  --color-brand-800: #f0a5d9;
  --color-brand-900: #e888cb;
  --color-brand-950: #d96fb8;
  --color-brand-950-rgb: 217, 111, 184;

  --color-red-050: #4c1e28;
  --color-red-100: #6e2938;
  --color-red-700: #f38ba8;
  --color-red-800: #f5a0b8;

  --color-orange-050: #4e341e;
  --color-orange-100: #6e4a29;
  --color-orange-600: #fab387;
  --color-orange-700: #f9e2af;

  --color-green-050: #1e3d21;
  --color-green-100: #29542d;
  --color-green-700: #a6e3a1;
  --color-green-800: #b8e9b3;

  --color-teal-050: #163a35;
  --color-teal-100: #1f5049;
  --color-teal-400: #94e2d5;
  --color-teal-700: #94e2d5;
  --color-teal-800: #a9e7dc;

  --color-coral-050: #4e2530;
  --color-coral-100: #6e3444;
  --color-coral-400: #f2cdcd;
  --color-coral-700: #f2cdcd;
  --color-coral-800: #f5dbdb;

  --color-purple-050: #3a2650;
  --color-purple-100: #513670;
  --color-purple-600: #cba6f7;
  --color-purple-700: #d8bdf9;

  /* Semantic background / text / border */
  --color-bg-primary: #1e1e2e;
  --color-bg-secondary: #181825;
  --color-bg-tertiary: #181825;
  --color-bg-quaternary: #313244;
  --color-bg-inactive: #11111b;
  --color-bg-hover: rgba(245, 194, 231, 0.08);
  --color-bg-overlay: rgba(17, 17, 27, 0.6);

  --color-text-main: #cdd6f4;
  --color-text-muted: #a6adc8;
  --color-text-contrast: #1e1e2e;

  --color-border-base: #45475a;
  --color-border-light: #313244;
  --color-border-muted: #313244;
  --color-border-strong: #585b70;
  --color-border-stronger: #6c7086;
  --color-border-focus: #f5c2e7;

  --color-illustration-outline: 205 214 244;
  --color-illustration-bg-primary: 88 44 74;
  --color-illustration-bg-secondary: 203 166 247;
  --color-illustration-bg-tertiary: 30 30 46;
  --color-illustration-tertiary: 249 226 175;
  --color-illustration-logo: 245 194 231;

  --color-marketing-logo: 245 194 231;

  /* Semantic Foreground */
  --color-fg-contrast: #cdd6f4;
  --color-fg-contrast-strong: #cdd6f4;
  --color-fg-heading: #cdd6f4;
  --color-fg-body: #cdd6f4;
  --color-fg-body-subtle: #a6adc8;
  --color-fg-inactive: #585b70;
  --color-fg-brand-soft: #cba6f7;
  --color-fg-brand: #f5c2e7;
  --color-fg-brand-strong: #f9d9f1;
  --color-fg-success: #a6e3a1;
  --color-fg-success-strong: #c1edbd;
  --color-fg-danger: #f38ba8;
  --color-fg-danger-strong: #f7a8bd;
  --color-fg-warning: #fab387;
  --color-fg-warning-strong: #f9e2af;
  --color-fg-sensitive: #f2cdcd;
  --color-fg-accent-primary-soft: #94e2d5;
  --color-fg-accent-primary: #94e2d5;
  --color-fg-accent-primary-strong: #b3ecdf;
  --color-fg-accent-secondary-soft: #f2cdcd;
  --color-fg-accent-secondary: #f2cdcd;
  --color-fg-accent-secondary-strong: #f5dbdb;
  --color-fg-accent-tertiary-soft: #cba6f7;
  --color-fg-accent-tertiary: #cba6f7;
  --color-fg-accent-tertiary-strong: #d8bdf9;

  /* Semantic Background */
  --color-bg-gray: #585b70;
  --color-bg-gray-strong: #6c7086;
  --color-bg-contrast-soft: #45475a;
  --color-bg-contrast: #585b70;
  --color-bg-contrast-strong: #cdd6f4;
  --color-bg-brand-softer: #3a2836;
  --color-bg-brand-soft: #57344b;
  --color-bg-brand-medium: #7a4665;
  --color-bg-brand: #f5c2e7;
  --color-bg-brand-strong: #f0a5d9;
  --color-bg-brand-stronger: #e888cb;
  --color-bg-success-soft: #1e3d21;
  --color-bg-success-medium: #29542d;
  --color-bg-success: #a6e3a1;
  --color-bg-success-strong: #b8e9b3;
  --color-bg-danger-soft: #4c1e28;
  --color-bg-danger-medium: #6e2938;
  --color-bg-danger: #f38ba8;
  --color-bg-danger-strong: #f5a0b8;
  --color-bg-warning-soft: #4e341e;
  --color-bg-warning-medium: #6e4a29;
  --color-bg-warning: #fab387;
  --color-bg-warning-strong: #f9e2af;
  --color-bg-accent-primary-soft: #163a35;
  --color-bg-accent-primary-medium: #1f5049;
  --color-bg-accent-primary: #94e2d5;
  --color-bg-accent-primary-strong: #a9e7dc;
  --color-bg-accent-secondary-soft: #4e2530;
  --color-bg-accent-secondary-medium: #6e3444;
  --color-bg-accent-secondary: #f2cdcd;
  --color-bg-accent-tertiary-soft: #3a2650;
  --color-bg-accent-tertiary-medium: #513670;
  --color-bg-accent-tertiary: #cba6f7;
  --color-bg-avatar-teal: #94e2d5;
  --color-bg-avatar-teal-hover: #a9e7dc;
  --color-bg-avatar-coral: #f2cdcd;
  --color-bg-avatar-coral-hover: #f5dbdb;
  --color-bg-avatar-brand: #f5c2e7;
  --color-bg-avatar-brand-hover: #f0a5d9;
  --color-bg-avatar-green: #a6e3a1;
  --color-bg-avatar-green-hover: #b8e9b3;
  --color-bg-avatar-purple: #cba6f7;
  --color-bg-avatar-purple-hover: #d8bdf9;

  /* Semantic Border */
  --color-border-brand-soft: #7a4665;
  --color-border-brand: #f5c2e7;
  --color-border-brand-strong: #f0a5d9;
  --color-border-success-soft: #29542d;
  --color-border-success: #a6e3a1;
  --color-border-success-strong: #b8e9b3;
  --color-border-danger-soft: #6e2938;
  --color-border-danger: #f38ba8;
  --color-border-danger-strong: #f5a0b8;
  --color-border-warning-soft: #6e4a29;
  --color-border-warning: #fab387;
  --color-border-warning-strong: #f9e2af;
  --color-border-accent-primary-soft: #1f5049;
  --color-border-accent-secondary-soft: #6e3444;
  --color-border-accent-secondary: #f2cdcd;
  --color-border-accent-tertiary-soft: #513670;
  --color-border-accent-tertiary: #cba6f7;
  --color-border-focus-contrast: #1e1e2e;

  /* Sidenav */
  --color-nav-fg-primary: #cdd6f4;
  --color-nav-fg-secondary: #cdd6f4;
  --color-nav-bg-primary: #181825;
  --color-nav-bg-secondary: #181825;
  --color-nav-bg-primary-strong: #11111b;
  --color-nav-bg-secondary-strong: #11111b;
  --color-nav-bg-primary-hover: rgba(245, 194, 231, 0.1);
  --color-nav-bg-secondary-hover: rgba(245, 194, 231, 0.1);
  --color-nav-bg-primary-hover-strong: rgba(245, 194, 231, 0.2);
  --color-nav-bg-secondary-hover-strong: rgba(245, 194, 231, 0.2);
  --color-nav-border-primary: #313244;
  --color-nav-border-secondary: #313244;
  --color-nav-border-primary-focus: #f5c2e7;
  --color-nav-border-secondary-focus: #f5c2e7;
}

body.layout_frontend, body.layout_frontend app-root {
  background-color: #1e1e2e !important;
}

/* Cute cat mascot logo, recolored for the dark Mocha+Pink theme */
body.layout_frontend bit-svg:has(.tw-fill-marketing-logo) svg {
  visibility: hidden;
}
body.layout_frontend bit-svg:has(.tw-fill-marketing-logo) {
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60'%3E%3Cg transform='translate(8,4)'%3E%3Cpath d='M8 20 L18 2 L28 20 Z' fill='%23f5c2e7'/%3E%3Cpath d='M32 20 L42 2 L52 20 Z' fill='%23f5c2e7'/%3E%3Cpath d='M13 16.5 L18 8 L23 16.5 Z' fill='%23cba6f7'/%3E%3Cpath d='M37 16.5 L42 8 L47 16.5 Z' fill='%23cba6f7'/%3E%3Ccircle cx='30' cy='30' r='24' fill='%23f5c2e7'/%3E%3Ccircle cx='14' cy='36' r='4' fill='%23cba6f7' opacity='0.7'/%3E%3Ccircle cx='46' cy='36' r='4' fill='%23cba6f7' opacity='0.7'/%3E%3Ccircle cx='21' cy='28' r='3.2' fill='%2311111b'/%3E%3Ccircle cx='39' cy='28' r='3.2' fill='%2311111b'/%3E%3Ccircle cx='22' cy='27' r='1' fill='%23f5e0dc'/%3E%3Ccircle cx='40' cy='27' r='1' fill='%23f5e0dc'/%3E%3Cpath d='M27 35 L33 35 L30 38 Z' fill='%2311111b'/%3E%3Cpath d='M30 38 Q30 41 26 41' stroke='%2311111b' stroke-width='1.3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M30 38 Q30 41 34 41' stroke='%2311111b' stroke-width='1.3' fill='none' stroke-linecap='round'/%3E%3Cline x1='2' y1='30' x2='14' y2='29' stroke='%23cdd6f4' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='2' y1='35' x2='14' y2='35' stroke='%23cdd6f4' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='46' y1='29' x2='58' y2='30' stroke='%23cdd6f4' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='46' y1='35' x2='58' y2='35' stroke='%23cdd6f4' stroke-width='1' stroke-linecap='round'/%3E%3C/g%3E%3Ctext x='65' y='38' font-family='Arial, sans-serif' font-weight='700' font-size='22' fill='%23cdd6f4'%3EVaultwarden%3C/text%3E%3C/svg%3E");
}

body.layout_frontend img.new-logo-themed {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60'%3E%3Cg transform='translate(8,4)'%3E%3Cpath d='M8 20 L18 2 L28 20 Z' fill='%23f5c2e7'/%3E%3Cpath d='M32 20 L42 2 L52 20 Z' fill='%23f5c2e7'/%3E%3Cpath d='M13 16.5 L18 8 L23 16.5 Z' fill='%23cba6f7'/%3E%3Cpath d='M37 16.5 L42 8 L47 16.5 Z' fill='%23cba6f7'/%3E%3Ccircle cx='30' cy='30' r='24' fill='%23f5c2e7'/%3E%3Ccircle cx='14' cy='36' r='4' fill='%23cba6f7' opacity='0.7'/%3E%3Ccircle cx='46' cy='36' r='4' fill='%23cba6f7' opacity='0.7'/%3E%3Ccircle cx='21' cy='28' r='3.2' fill='%2311111b'/%3E%3Ccircle cx='39' cy='28' r='3.2' fill='%2311111b'/%3E%3Ccircle cx='22' cy='27' r='1' fill='%23f5e0dc'/%3E%3Ccircle cx='40' cy='27' r='1' fill='%23f5e0dc'/%3E%3Cpath d='M27 35 L33 35 L30 38 Z' fill='%2311111b'/%3E%3Cpath d='M30 38 Q30 41 26 41' stroke='%2311111b' stroke-width='1.3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M30 38 Q30 41 34 41' stroke='%2311111b' stroke-width='1.3' fill='none' stroke-linecap='round'/%3E%3Cline x1='2' y1='30' x2='14' y2='29' stroke='%23cdd6f4' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='2' y1='35' x2='14' y2='35' stroke='%23cdd6f4' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='46' y1='29' x2='58' y2='30' stroke='%23cdd6f4' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='46' y1='35' x2='58' y2='35' stroke='%23cdd6f4' stroke-width='1' stroke-linecap='round'/%3E%3C/g%3E%3Ctext x='65' y='38' font-family='Arial, sans-serif' font-weight='700' font-size='22' fill='%23cdd6f4'%3EVaultwarden%3C/text%3E%3C/svg%3E");
}