/* Tokens du design « Réglages » (Claude Design), scopés à .set-root pour ne pas
   entrer en collision avec le DashboardLayout (Tailwind) ni les autres pages.
   Source : kiclic/colors_and_type.css (:root) + kiclic/settings.css (thème).
   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. */
.set-root {
  /* Brand */
  --k-blue:   #5B8DEF;
  --k-violet: #B968C7;
  --k-pink:   #E94E8B;

  /* 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%);

  /* Radii */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;

  /* Sémantiques */
  --success: #10B981;
  --warning: #F59E0B;
  --error:   #EF4444;

  /* 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;

  /* Density (par défaut confortable) */
  --den: 1;

  /* 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.06);
  --surface-tint-light:  rgba(255,255,255,0.035);
  --surface-tint-strong: rgba(255,255,255,0.12);
  --fg:           #FFFFFF;
  --fg-secondary: #9CA3AF;
  --fg-muted:     #6B7280;

  /* Surfaces spécifiques Réglages — DARK */
  --main-bg: transparent;      /* le DashboardLayout gère déjà le fond */
  --panel:   #101014;
  --panel-2: #17171c;
  --hair:    rgba(255,255,255,0.08);
  --hair-strong: rgba(255,255,255,0.14);
  --row:       rgba(255,255,255,0.035);
  --row-hover: rgba(255,255,255,0.06);
  --icon-tile: rgba(255,255,255,0.06);
  --top-blur:  rgba(10,10,10,0.62);
  --sheen: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0));
  --shadow-soft: 0 1px 2px rgba(0,0,0,0.4), 0 12px 34px rgba(0,0,0,0.34);
  --shadow-button: 0 8px 20px rgba(233,78,139,0.30);

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

/* Densité compacte (facultatif — parité avec le design) */
html[data-density="compact"] .set-root { --den: 0.82; }

/* Neutrals + surfaces — LIGHT (quand le site est en clair) */
html[data-theme="light"] .set-root {
  --bg:         #F1F1F4;
  --bg-elev-1:  #FFFFFF;
  --bg-elev-2:  #F7F7F9;
  --border:     #E6E6EB;
  --border-soft: rgba(17,20,28,0.08);
  --surface-tint:        rgba(17,20,28,0.045);
  --surface-tint-light:  rgba(17,20,28,0.028);
  --surface-tint-strong: rgba(17,20,28,0.07);
  --fg:           #12141A;
  --fg-secondary: #565D6B;
  --fg-muted:     #8A909C;

  --main-bg: transparent;
  --panel:   #FFFFFF;
  --panel-2: #F7F7F9;
  --hair:    rgba(17,20,28,0.08);
  --hair-strong: rgba(17,20,28,0.14);
  --row:       rgba(17,20,28,0.028);
  --row-hover: rgba(17,20,28,0.05);
  --icon-tile: rgba(17,20,28,0.05);
  --top-blur:  rgba(255,255,255,0.7);
  --sheen: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0));
  --shadow-soft: 0 1px 2px rgba(16,24,40,0.05), 0 10px 30px rgba(16,24,40,0.08);
}