/* Tokens du design « Série récurrente — Édition » (Claude Design), scopés à
   .rs-root pour ne pas entrer en collision avec le DashboardLayout (Tailwind).
   Source : kiclic/colors_and_type.css (:root) + recurring-series.css (overrides).
   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 (.rs-overlay, .rs-toast) sont des descendants DOM de .rs-root :
   ils héritent des mêmes variables même en position:fixed. */
.rs-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-error: linear-gradient(90deg, #EF4444 0%, #DC2626 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);
  --surface-tint:        rgba(255,255,255,0.08);
  --surface-tint-light:  rgba(255,255,255,0.05);
  --surface-tint-strong: rgba(255,255,255,0.12);

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

  /* Semantic */
  --success: #10B981;
  --warning: #F59E0B;
  --error:   #EF4444;

  /* Shadows */
  --shadow-button: 0 8px 20px rgba(233,78,139,0.30);

  /* Type */
  --font-sans:    "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Rubik", system-ui, 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;
  --t-base: 280ms;

  /* Locaux au design (recurring-series.css) — DARK */
  --rs-t1: rgba(255,255,255,0.02); --rs-t2: rgba(255,255,255,0.03); --rs-t3: rgba(255,255,255,0.04);
  --rs-t4: rgba(255,255,255,0.05); --rs-t5: rgba(255,255,255,0.06);
  --rs-tabbg: rgba(0,0,0,0.2); --rs-footer-bg: rgba(10,10,10,0.72);
  --rs-cover: linear-gradient(135deg,#2a2140,#3a2036);
  --rs-tx-violet: #E0BFFF; --rs-tx-blue: #B9CFFA; --rs-tx-amber: #FCD34D;

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

/* Neutrals — LIGHT (quand le site est en clair) */
html[data-theme="light"] .rs-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;
  --surface-tint: rgba(17,24,39,0.06); --surface-tint-light: rgba(17,24,39,0.035); --surface-tint-strong: rgba(17,24,39,0.09);
  --rs-t1: rgba(17,24,39,0.02); --rs-t2: rgba(17,24,39,0.03); --rs-t3: rgba(17,24,39,0.045);
  --rs-t4: rgba(17,24,39,0.05); --rs-t5: rgba(17,24,39,0.065);
  --rs-tabbg: rgba(17,24,39,0.04); --rs-footer-bg: rgba(255,255,255,0.82);
  --rs-cover: linear-gradient(135deg,#E7E0F3,#F4E1EB);
  --rs-tx-violet: #8E45AE; --rs-tx-blue: #2563EB; --rs-tx-amber: #B45309;
}