/* Tokens du design « Mes produits » (Claude Design), scopés à .cp-root pour ne
   pas entrer en collision avec le DashboardLayout (Tailwind).
   Source : kiclic/colors_and_type.css (:root) + campagnes.css (overrides cp-*).
   Le thème suit le système global du site : html[data-theme="light"] => clair,
   sinon sombre (défaut). La police Rubik est déjà chargée par le site.
   Les overlays (.cp-ov, .cp-toast, .gm-menu, .gm-actbar) sont des descendants
   DOM de .cp-root : ils héritent des mêmes variables même en position:fixed. */
.cp-root {
  /* Brand */
  --k-blue:   #5B8DEF;
  --k-violet: #B968C7;
  --k-pink:   #E94E8B;
  --k-yellow: #EAB308;
  --k-orange: #F59E0B;

  /* Gradients */
  --k-gradient:      linear-gradient(135deg, var(--k-blue) 0%, var(--k-violet) 50%, var(--k-pink) 100%);
  --k-gradient-h:    linear-gradient(90deg,  var(--k-blue) 0%, var(--k-violet) 50%, var(--k-pink) 100%);
  --k-gradient-pro:  linear-gradient(90deg, #FF8A00 0%, #FACC15 100%);
  --k-gradient-warn: linear-gradient(90deg, #F59E0B 0%, #EF4444 100%);

  /* Neutrals — DARK (défaut) */
  --bg:        #0A0A0A;
  --bg-elev-1: #111111;
  --bg-elev-2: #1A1A1A;
  --border:    #222222;
  --border-soft: rgba(255,255,255,0.08);

  --fg:           #FFFFFF;
  --fg-secondary: #9CA3AF;
  --fg-muted:     #6B7280;

  /* Type */
  --font-sans: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Animation */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:   180ms;

  /* Locaux au design (campagnes.css) — DARK */
  --cp-t1: rgba(255,255,255,.02); --cp-t2: rgba(255,255,255,.03); --cp-t3: rgba(255,255,255,.045);
  --cp-t4: rgba(255,255,255,.06); --cp-t5: rgba(255,255,255,.085);
  --cp-topbar: color-mix(in srgb, var(--bg) 64%, transparent);
  --cp-tx-violet:#E0BFFF; --cp-tx-blue:#B9CFFA; --cp-tx-amber:#FCD34D;
  --cp-tx-green:#34D399;  --cp-tx-pink:#FBA4C6; --cp-tx-red:#FCA5A5;
  --cp-shadow: 0 24px 60px rgba(0,0,0,.45);

  font-family: var(--font-sans);
  color: var(--fg);
}

/* Neutrals — LIGHT (quand le site est en clair) */
html[data-theme="light"] .cp-root {
  --bg:#F2F2F7; --bg-elev-1:#FFFFFF; --bg-elev-2:#F3F4F7;
  --border:#E2E4EA; --border-soft: rgba(17,24,39,0.08);
  --fg:#0B0D12; --fg-secondary:#4B5563; --fg-muted:#8A93A2;
  --cp-t1: rgba(17,24,39,.02); --cp-t2: rgba(17,24,39,.03); --cp-t3: rgba(17,24,39,.05);
  --cp-t4: rgba(17,24,39,.065); --cp-t5: rgba(17,24,39,.09);
  --cp-topbar: color-mix(in srgb, var(--bg) 72%, transparent);
  --cp-tx-violet:#8E45AE; --cp-tx-blue:#2563EB; --cp-tx-amber:#B45309;
  --cp-tx-green:#0E9F6E;  --cp-tx-pink:#C0246B; --cp-tx-red:#B91C1C;
  --cp-shadow: 0 24px 60px rgba(30,30,60,.16);
}