/* KharonBridge UX — TOKENS (Phase 2: variables only, no visual impact) */

:root {
  /* Brand core */
  --kb-ink: #2c3e50;       /* fond nuit KB */
  --kb-gold: #d4af37;      /* or rituel */

  /* Accent aliases (for components) */
  --kb-accent-blue: var(--kb-ink);
  --kb-accent-gold: var(--kb-gold);

  /* Widget signature border */
  --kb-widget-border-width: 3px; /* 2–4px */
  --kb-widget-border-radius: var(--kb-radius-xl);

  /* Neutrals (no pure white) */
  --kb-white-soft: rgba(255, 255, 255, 0.92);
  --kb-white-dim: rgba(255, 255, 255, 0.78);
  --kb-white-muted: rgba(255, 255, 255, 0.62);
  --kb-black: rgba(0, 0, 0, 1);

  /* Text colors for dark UI */
  --kb-text-1: rgba(255, 255, 255, 0.92);
  --kb-text-2: rgba(255, 255, 255, 0.78);
  --kb-text-3: rgba(255, 255, 255, 0.62);
  --kb-text-inv: rgba(20, 24, 28, 0.92);

  /* Glass surfaces (base) */
  --kb-glass-1: rgba(255, 255, 255, 0.08);
  --kb-glass-2: rgba(255, 255, 255, 0.12);
  --kb-glass-3: rgba(255, 255, 255, 0.16);
  --kb-stroke-1: rgba(255, 255, 255, 0.14);
  --kb-stroke-2: rgba(255, 255, 255, 0.20);

  /* Accent glows (subtle) */
  --kb-glow-gold-1: rgba(212, 175, 55, 0.18);
  --kb-glow-gold-2: rgba(212, 175, 55, 0.10);

  /* Radii */
  --kb-radius-s: 12px;
  --kb-radius-m: 16px;
  --kb-radius-l: 22px;
  --kb-radius-xl: 28px;

  /* Shadows (soft, dark UI) */
  --kb-shadow-1: 0 10px 30px rgba(0, 0, 0, 0.22);
  --kb-shadow-2: 0 18px 50px rgba(0, 0, 0, 0.28);

  /* Spacing scale */
  --kb-space-1: 6px;
  --kb-space-2: 10px;
  --kb-space-3: 14px;
  --kb-space-4: 18px;
  --kb-space-5: 24px;
  --kb-space-6: 32px;
  --kb-space-7: 48px;

  /* Typography */
  --kb-font: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --kb-font-size: 16px;
  --kb-line: 1.6;

  /* Motion (slow, calm) */
  --kb-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --kb-dur-fast: 180ms;
  --kb-dur: 320ms;
  --kb-dur-slow: 520ms;

  /* Container widths (for Phase 3/4 later) */
  --kb-container-max: 1440px;
  --kb-reading-max: 840px;
}
/* =========================================================
   KB — Header Band tokens (Mon espace personnel)
   ========================================================= */
:root{
  /* Fond bandeau : bleu plein (sans gradient) */
  --kbmb-band-bg: #2c3e50;           /* bleu KB (ink) */
  --kbmb-band-bg-hover: #34495e;     /* léger éclaircissement */

  /* Textes */
  --kbmb-band-title: rgba(255,255,255,.95);
  --kbmb-band-meta: #d4af37;         /* or rituel */
  --kbmb-band-meta-strong: #f0d58a;  /* or plus lumineux */

  /* Boutons dans le bandeau : OR (fond) + texte bleu */
  --kbmb-band-btn-bg: #d4af37;
  --kbmb-band-btn-bg-hover: #e0c15a;
  --kbmb-band-btn-border: rgba(212,175,55,.55);
  --kbmb-band-btn-text: #2c3e50;     /* bleu KB */

  /* Variante bouton secondaire (si tu veux le garder “soft”) */
  --kbmb-band-btn2-bg: rgba(255,255,255,.10);
  --kbmb-band-btn2-bg-hover: rgba(255,255,255,.14);
  --kbmb-band-btn2-border: rgba(255,255,255,.20);
  --kbmb-band-btn2-text: rgba(255,255,255,.92);

  /* Ombres / contours */
  --kbmb-band-border: rgba(255,255,255,.14);
  --kbmb-band-shadow: 0 12px 28px rgba(0,0,0,.22);
}
/* =========================
   KB — Bandeau Account/Profil
   ========================= */

:root{
  --kbmb-band-bg: #2c3e50;      /* bleu “plein” */
  --kbmb-band-gold: #D4AF37;    /* or */
  --kbmb-band-btn-bg: #D4AF37; /* bouton or */
  --kbmb-band-btn-fg: #2c3e50; /* texte bouton bleu */
}

/* IMPORTANT : écraser le gradient */
.kb-ux-container .kbmb-widget--account-subscription .kb-prof-header,
.kb-ux-container .kbmb-widget--account-subscription .kbmb-profile-band{
  background: var(--kbmb-band-bg) !important;
  background-image: none !important;
}

/* Tout le texte du bandeau en or (sauf le bouton qu’on restyle dessous) */
.kb-ux-container .kbmb-widget--account-subscription .kb-prof-header,
.kb-ux-container .kbmb-widget--account-subscription .kb-prof-header *{
  color: var(--kbmb-band-gold) !important;
}

/* Boutons du bandeau : or + texte bleu */
.kb-ux-container .kbmb-widget--account-subscription .kb-prof-header .kb-btn,
.kb-ux-container .kbmb-widget--account-subscription .kb-prof-header a.kb-btn{
  background: var(--kbmb-band-btn-bg) !important;
  color: var(--kbmb-band-btn-fg) !important;
  border-color: transparent !important;
}
/* Supprimer le voile / effet glass sur le bandeau */
.kb-ux-container .kbmb-widget--account-subscription .kb-prof-header,
.kb-ux-container .kbmb-widget--account-subscription .kbmb-profile-band{
  background: var(--kbmb-band-bg) !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}
/* IMPORTANT : si le voile est un overlay via pseudo-élément */
.kb-ux-container .kbmb-widget--account-subscription .kb-prof-header::before,
.kb-ux-container .kbmb-widget--account-subscription .kb-prof-header::after,
.kb-ux-container .kbmb-widget--account-subscription .kbmb-profile-band::before,
.kb-ux-container .kbmb-widget--account-subscription .kbmb-profile-band::after{
  content: none !important;
  display: none !important;
  background: transparent !important;
  opacity: 0 !important;
}