/**
 * Theme Kokincity — palette "funky" extraite du logo KokinCity.com.
 *
 * Branding : hot pink magenta + noir, vibe urbain bold. Mode sombre par
 * défaut pour rester cohérent avec les vues Mlb (dark-first) et faire
 * ressortir le rose néon du logo.
 *
 * Convention : seules les variables sont définies ici. Aucune règle
 * de mise en page ; les vues/partials utilisent var(--xyz).
 */

/* ============================================================
   THÈME FUNKY 💖  (pink magenta + dark, vibe urbain néon)
   ============================================================ */
:root[data-theme="funky"] {
  /* Surfaces sombres — fond noir profond pour faire vibrer le pink */
  --bg:           #0A0A0F;
  --bg2:          #12121A;
  --card:         #1A1A24;
  --card2:        #25252F;
  --border:       #3A3A48;

  /* Texte clair sur fond sombre */
  --text:         #FFFFFF;
  --muted:        #B8B8C5;       /* WCAG AA ≥ 4.5:1 sur --bg */

  /* Couleurs sémantiques — extraites du logo KokinCity */
  --primary:      #FF1F8E;        /* hot pink magenta du logo */
  --primary2:     #FF5BAA;
  --secondary:    #FFFFFF;        /* le blanc devient secondaire sur fond noir */
  --secondary2:   #E8E8F0;
  --highlight:    #FFD400;        /* jaune punch pour stickers/accents */
  --accent3:      #00D9C0;        /* turquoise punchy pour notifications */
  --green:        #1FBF6E;

  /* Couleurs d'ambiance pour glows / radial backgrounds (rgba) */
  --glow-primary:    rgba(255, 31, 142, 0.20);
  --glow-secondary:  rgba(255, 255, 255, 0.04);
  --glow-highlight:  rgba(255, 212, 0, 0.06);

  /* Gradients — pink → noir profond pour les CTA */
  --grad:         linear-gradient(135deg, #FF1F8E, #7A0F47);
  --grad-h:       linear-gradient(135deg, #FFD400, #FF1F8E);

  /* Typographie & forme — bold/condensed comme le logo */
  --display:        'Anton', 'Bebas Neue', 'Inter', system-ui, sans-serif;
  --display-italic: normal;
  --display-weight: 800;
  --display-spacing: -0.02em;
  --body:           'Inter', 'Plus Jakarta Sans', system-ui, sans-serif;
  --radius:         8px;          /* moins arrondi, plus cut/urbain */
  --radius-lg:      14px;
  --radius-pill:    99px;

  /* Effets — glow rose marqué */
  --shadow:         0 30px 80px -20px rgba(0,0,0,0.6),
                    0 0 60px -30px rgba(255,31,142,0.35);
}

/* ============================================================
   FALLBACK : aucun data-theme → applique funky
   ============================================================ */
:root:not([data-theme]) {
  --bg:           #0A0A0F;
  --bg2:          #12121A;
  --card:         #1A1A24;
  --border:       #3A3A48;
  --text:         #FFFFFF;
  --muted:        #B8B8C5;
  --primary:      #FF1F8E;
  --secondary:    #FFFFFF;
  --highlight:    #FFD400;
  --grad:         linear-gradient(135deg, #FF1F8E, #7A0F47);
  --grad-h:       linear-gradient(135deg, #FFD400, #FF1F8E);
  --glow-primary:    rgba(255, 31, 142, 0.20);
  --glow-secondary:  rgba(255, 255, 255, 0.04);
  --glow-highlight:  rgba(255, 212, 0, 0.06);
  --display:        'Anton', 'Bebas Neue', 'Inter', system-ui, sans-serif;
  --display-italic: normal;
  --display-weight: 800;
  --display-spacing: -0.02em;
  --body:           'Inter', 'Plus Jakarta Sans', system-ui, sans-serif;
  --radius:         8px;
  --radius-lg:      14px;
  --radius-pill:    99px;
}

/* ============================================================
   TRANSITIONS GLOBALES
   ============================================================ */
:root { color-scheme: dark; }
html { transition: background-color .35s ease, color .35s ease; }
body, .card, .surface, button, input, .btn {
  transition: background-color .35s ease,
              color .35s ease,
              border-color .35s ease,
              box-shadow .35s ease;
}

/* ============================================================
   ACCESSIBILITÉ — reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   ACCESSIBILITÉ — focus visible clavier (WCAG 2.4.7)
   ============================================================ */
:where(a, button, input, textarea, select, [role="button"], [tabindex]):focus-visible,
.ml-btn:focus-visible,
.ml-top-cta:focus-visible,
.ml-nav a:focus-visible,
.ml-filter:focus-visible,
.theme-toggle button:focus-visible,
.mlb-tab:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-pill, 8px);
}

:where(input, textarea, select):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

/* ============================================================
   BRAND KOKINCITY — alternance pink/blanc/pink reproduisant le logo
   ============================================================ */
.ml-brand, .lg-brand, .ep-brand, .ab-brand, .ba-brand, .bu-brand,
.chat-brand, .pa-brand, .sg-brand, .va-brand, .off-brand {
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: none;
}
.kc-k {
  color: var(--primary);          /* hot pink magenta */
  -webkit-text-stroke: 1px #000;  /* contour noir comme le logo */
  text-stroke: 1px #000;
}
.kc-w {
  color: var(--text);             /* blanc sur fond sombre */
}
.kc-com {
  color: var(--primary);
  font-size: 0.5em;
  font-weight: 900;
  vertical-align: super;
  margin-left: 1px;
  -webkit-text-stroke: 0.5px #000;
}