/* ── Design tokens ────────────────────────────────────────────────────────────
   Split out of theme.css so it can load on EVERY page. The redesigned navbar
   (and later, other migrated components) need these custom properties, but the
   page chrome in theme.css — dark html/body backgrounds, hero heights — must
   NOT apply to the legacy Bootstrap templates. Load this everywhere; load
   theme.css only on pages the redesign owns.
   ──────────────────────────────────────────────────────────────────────────── */

:root {
  /* Core brand colors */
  --brand-dark:     #0d0817;
  --brand-card:     #201927;
  --brand-card2:    #2e2736;
  --brand-footer:   #0a0a1a;
  --brand-purple:   #9b00ff;
  --brand-purpleL:  #e2b5ff;
  --brand-purpleXL: #f0d0ff;
  --brand-purpleM:  #c87eff;
  --brand-purpleD:  #9b3fd4;
  --brand-gold:     #facc15;
  --brand-text:     #ebdef2;
  --brand-muted:    #cbc4ce;
  --brand-faint:    #94a3b8;
  --brand-telegram: #009edb;
  --brand-amber:    #dda715;
  --brand-action:   #1a0a2e;
  --brand-action-muted: #451d61;
  --brand-action-deep: #2e014b;
  --brand-cta-text: #f4e3ff;
  --brand-logo: #f7f6f8;
  --brand-danger: #ff0000;
  --brand-promo: #ff2222;
  --brand-warning: #ffa600;
  --brand-whatsapp: #25d366;
  --brand-whatsapp-mark: #64b161;
  --brand-icon-light: #e5e5e5;
  --brand-neutral: #6b6478;
  --brand-icon-muted: #6b7280;

  /* RGB channels for Tailwind opacity modifiers */
  --brand-dark-rgb:     13 8 23;
  --brand-card-rgb:     32 25 39;
  --brand-card2-rgb:    46 39 54;
  --brand-footer-rgb:   10 10 26;
  --brand-purple-rgb:   155 0 255;
  --brand-purpleL-rgb:  226 181 255;
  --brand-purpleXL-rgb: 240 208 255;
  --brand-purpleM-rgb:  200 126 255;
  --brand-purpleD-rgb:  155 63 212;
  --brand-gold-rgb:     250 204 21;
  --brand-text-rgb:     235 222 242;
  --brand-muted-rgb:    203 196 206;
  --brand-faint-rgb:    148 163 184;
  --brand-telegram-rgb: 0 158 219;
  --brand-amber-rgb:    221 167 21;
  --brand-action-rgb:   26 10 46;
  --brand-action-muted-rgb: 69 29 97;
  --brand-action-deep-rgb: 46 1 75;
  --brand-cta-text-rgb: 244 227 255;
  --brand-logo-rgb: 247 246 248;
  --brand-danger-rgb: 255 0 0;
  --brand-promo-rgb: 255 34 34;
  --brand-warning-rgb: 255 166 0;
  --brand-whatsapp-rgb: 37 211 102;
  --brand-whatsapp-mark-rgb: 100 177 97;
  --brand-icon-light-rgb: 229 229 229;
  --brand-neutral-rgb: 107 100 120;
  --brand-icon-muted-rgb: 107 114 128;

  /* Purple opacity scale */
  --purple-glass:   rgba(226,181,255,0.18);
  --purple-faint:   rgba(226,181,255,0.2);
  --purple-border:  rgba(226,181,255,0.15);
  --purple-subtle:  rgba(226,181,255,0.1);
  --purple-dim:     rgba(226,181,255,0.07);
  --purple-accent:  rgba(226,181,255,0.3);

  /* Shared surfaces */
  --surface-page:    #150e1f;
  --surface-panel:   rgba(23,16,33,0.78);
  --surface-input:   rgba(46,39,54,0.62);
  --surface-chip:    rgba(46,39,54,0.34);
  --input-dark:      #241d2b;
  --search-bg:       rgba(57,50,65,0.35);
  --surface-overlay: rgba(13,8,23,0.72);
  --surface-overlay-rgb: 13 8 23;
  --surface-raised: rgba(29,24,35,0.65);
  --glow-secondary: rgba(100,20,220,0.28);
  --border-muted:    rgba(74,69,77,0.2);
  --border-muted-rgb: 74 69 77;

  /* Status colors */
  --status-avail:   #00bc7d;
  --status-unavail: #ff4444;
  --status-success: #22c55e;
  --status-avail-rgb:   0 188 125;
  --status-unavail-rgb: 255 68 68;
  --status-success-rgb: 34 197 94;

  /* Shared gradients */
  --gradient-brand: linear-gradient(135deg, var(--brand-purple) 0%, var(--brand-purpleL) 100%);
  --gradient-button: linear-gradient(152deg, var(--brand-purpleL) 0%, #986cb6 100%);
  --gradient-page: linear-gradient(180deg, var(--brand-dark) 0%, rgba(13, 8, 23, 0) 100%);
}