/* Catppuccin Mocha theme for Converse.js         */
/* Targets the actual --converse-* Bootstrap vars */

converse-root[data-converse-theme="catppuccin"],
converse-root[data-bs-theme="catppuccin"] {

  /* ── Catppuccin Mocha base palette ─────────────────── */
  --ctp-base:      #1e1e2e;
  --ctp-mantle:    #181825;
  --ctp-crust:     #11111b;
  --ctp-surface0:  #313244;
  --ctp-surface1:  #45475a;
  --ctp-surface2:  #585b70;
  --ctp-overlay0:  #6c7086;
  --ctp-overlay1:  #7f849c;
  --ctp-subtext1:  #bac2de;
  --ctp-text:      #cdd6f4;
  --ctp-lavender:  #b4befe;
  --ctp-blue:      #89b4fa;
  --ctp-sapphire:  #74c7ec;
  --ctp-sky:       #89dceb;
  --ctp-teal:      #94e2d5;
  --ctp-green:     #b4befe; /*#a6e3a1*/;
  --ctp-yellow:    #f9e2af;
  --ctp-peach:     #fab387;
  --ctp-red:       #f38ba8;
  --ctp-mauve:     #cba6f7;
  --ctp-pink:      #f5c2e7;
  --ctp-flamingo:  #f2cdcd;

  /* ── Bootstrap color overrides ─────────────────────── */
  --converse-blue:       var(--ctp-blue);
  --converse-indigo:     var(--ctp-lavender);
  --converse-purple:     var(--ctp-mauve);
  --converse-pink:       var(--ctp-pink);
  --converse-red:        var(--ctp-red);
  --converse-orange:     var(--ctp-peach);
  --converse-yellow:     var(--ctp-yellow);
  --converse-green:      var(--ctp-green);
  --converse-teal:       var(--ctp-teal);
  --converse-cyan:       var(--ctp-sky);
  --converse-black:      var(--ctp-crust);
  --converse-white:      var(--ctp-text);
  --converse-gray:       var(--ctp-overlay0);
  --converse-gray-dark:  var(--ctp-surface1);

  /* Gray ramp mapped to Mocha surfaces/overlays */
  --converse-gray-100:   var(--ctp-surface0);
  --converse-gray-200:   var(--ctp-surface1);
  --converse-gray-300:   var(--ctp-surface2);
  --converse-gray-400:   var(--ctp-overlay0);
  --converse-gray-500:   var(--ctp-overlay1);
  --converse-gray-600:   var(--ctp-subtext1);
  --converse-gray-700:   var(--ctp-text);
  --converse-gray-800:   var(--ctp-surface1);
  --converse-gray-900:   var(--ctp-mantle);

  /* ── Semantic colors → Lavender as primary ──────────── */
  --converse-primary:    var(--ctp-lavender);
  --converse-secondary:  var(--ctp-surface2);
  --converse-success:    var(--ctp-green);
  --converse-info:       var(--ctp-sky);
  --converse-warning:    var(--ctp-yellow);
  --converse-danger:     var(--ctp-red);
  --converse-light:      var(--ctp-surface0);
  --converse-dark:       var(--ctp-mantle);

  --converse-primary-rgb:   180, 190, 254;
  --converse-secondary-rgb: 88, 91, 112;
  --converse-success-rgb:   166, 227, 161;
  --converse-info-rgb:      137, 220, 235;
  --converse-warning-rgb:   249, 226, 175;
  --converse-danger-rgb:    243, 139, 168;
  --converse-light-rgb:     49, 50, 68;
  --converse-dark-rgb:      24, 24, 37;

  /* ── Body ───────────────────────────────────────────── */
  --converse-body-color:         var(--ctp-text);
  --converse-body-color-rgb:     205, 214, 244;
  --converse-body-bg:            var(--ctp-base);
  --converse-body-bg-rgb:        30, 30, 46;
  --converse-emphasis-color:     var(--ctp-text);
  --converse-emphasis-color-rgb: 205, 214, 244;

  --converse-secondary-color:     var(--ctp-subtext1);
  --converse-secondary-color-rgb: 186, 194, 222;
  --converse-secondary-bg:        var(--ctp-surface0);
  --converse-secondary-bg-rgb:    49, 50, 68;

  --converse-tertiary-color:     var(--ctp-overlay0);
  --converse-tertiary-color-rgb: 108, 112, 134;
  --converse-tertiary-bg:        var(--ctp-mantle);
  --converse-tertiary-bg-rgb:    24, 24, 37;

  /* ── Links → Lavender ───────────────────────────────── */
  --converse-link-color:           var(--ctp-lavender);
  --converse-link-color-rgb:       180, 190, 254;
  --converse-link-hover-color:     var(--ctp-blue);
  --converse-link-hover-color-rgb: 137, 180, 250;
  --converse-link-decoration:      none;

  /* ── Headings ───────────────────────────────────────── */
  --converse-heading-color: var(--ctp-lavender);

  /* ── Borders ────────────────────────────────────────── */
  --converse-border-color:             var(--ctp-surface1);
  --converse-border-color-translucent: rgba(180, 190, 254, 0.15);

  /* ── Highlight / selection ──────────────────────────── */
  --converse-highlight-color: var(--ctp-text);
  --converse-highlight-bg:    var(--ctp-surface0);

  /* ── Focus ring → Lavender ──────────────────────────── */
  --converse-focus-ring-color: rgba(180, 190, 254, 0.25);

  /* ── Code ───────────────────────────────────────────── */
  --converse-code-color: var(--ctp-pink);

  /* ── Subtle bg/border tints ─────────────────────────── */
  --converse-primary-bg-subtle:    rgba(180, 190, 254, 0.15);
  --converse-success-bg-subtle:    rgba(166, 227, 161, 0.15);
  --converse-danger-bg-subtle:     rgba(243, 139, 168, 0.15);
  --converse-warning-bg-subtle:    rgba(249, 226, 175, 0.15);
  --converse-info-bg-subtle:       rgba(137, 220, 235, 0.15);
  --converse-secondary-bg-subtle:  var(--ctp-surface0);

  --converse-primary-border-subtle:   rgba(180, 190, 254, 0.4);
  --converse-success-border-subtle:   rgba(166, 227, 161, 0.4);
  --converse-danger-border-subtle:    rgba(243, 139, 168, 0.4);
  --converse-warning-border-subtle:   rgba(249, 226, 175, 0.4);
  --converse-info-border-subtle:      rgba(137, 220, 235, 0.4);
  --converse-secondary-border-subtle: var(--ctp-surface2);

  --converse-primary-text-emphasis:   var(--ctp-lavender);
  --converse-success-text-emphasis:   var(--ctp-green);
  --converse-danger-text-emphasis:    var(--ctp-red);
  --converse-warning-text-emphasis:   var(--ctp-yellow);
  --converse-info-text-emphasis:      var(--ctp-sky);
  --converse-secondary-text-emphasis: var(--ctp-subtext1);

  /* ── Forms ──────────────────────────────────────────── */
  --converse-form-valid-color:         var(--ctp-green);
  --converse-form-valid-border-color:  var(--ctp-green);
  --converse-form-invalid-color:       var(--ctp-red);
  --converse-form-invalid-border-color: var(--ctp-red);

  /* ── classic.scss semantic vars (still referenced) ─── */
  --foreground-color:     var(--ctp-text);
  --background-color:     var(--ctp-base);
  --primary-color:        var(--ctp-lavender) !important;
  --secondary-color:      var(--ctp-surface2) !important;
  --success-color:        var(--ctp-green);
  --danger-color:         var(--ctp-red);
  --warning-color:        var(--ctp-peach);
  --info-color:           var(--ctp-sky);
  --error-color:          var(--ctp-red);
  --link-color:           var(--ctp-lavender);
  --link-color-hover:     var(--ctp-blue);
  --heading-color:        var(--ctp-lavender);
  --brand-heading-color:  var(--ctp-lavender);
  --focus-color:          var(--ctp-lavender);
  --controlbox-color:     var(--ctp-lavender);
  --highlight-color:      var(--ctp-surface0);
  --highlight-color-hover: var(--ctp-surface1);
  --disabled-color:       var(--ctp-overlay0);
  --subdued-color:        var(--ctp-overlay0);
  --selection-color:      var(--ctp-text);
  --border-color:         var(--ctp-surface1);

  --chat-status-online:  var(--ctp-green);
  --chat-status-away:    var(--ctp-peach);
  --chat-status-busy:    var(--ctp-red);
  --chat-status-offline: var(--ctp-overlay0);

  --chat-color:            var(--ctp-green);
  --chat-header-fg-color:  var(--ctp-crust);
  --chat-header-bg-color:  var(--ctp-green);
  --muc-color:             var(--ctp-peach);
  --muc-header-fg-color:   var(--ctp-crust);
  --muc-header-bg-color:   var(--ctp-peach);
  --headlines-color:           var(--ctp-yellow);
  --headlines-header-fg-color: var(--ctp-crust);
  --headlines-header-bg-color: var(--ctp-yellow);

  --global-background-color: var(--ctp-base);
  --primary-color-hover:     var(--ctp-blue);
  --secondary-color-hover:   var(--ctp-surface1);
  --chat-color-hover:        var(--ctp-green);
  --muc-color-hover:         var(--ctp-peach);
  --danger-color-hover:      var(--ctp-red);
  --success-color-hover:     var(--ctp-green);
  --warning-color-hover:     var(--ctp-peach);

  /* ── Shadows (soften for dark theme) ───────────────── */
  --converse-box-shadow:        0 0.5rem 1rem rgba(0, 0, 0, 0.4);
  --converse-box-shadow-sm:     0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
  --converse-box-shadow-lg:     0 1rem 3rem rgba(0, 0, 0, 0.5);
  --converse-box-shadow-inset:  inset 0 1px 2px rgba(0, 0, 0, 0.3);
}