/* ═══════════════════════════════════════════════════════════════════════════
   Choreografy — Design System × Shared Token Library
   Token hierarchy: L0 Primitive → L1 Semantic → L2 Base → L3 Toggle → L4 BEM
   Themes: light (Choreografy warm — DEFAULT) / dark (optional toggle)
   Toggle: document.documentElement.dataset.theme = 'dark' | '' (remove)
   F-08: 2026-04-21
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Google Fonts — Cardo (heading) + Inter (body) + selectable heading fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Cardo:ital,wght@0,400;0,700;1,400&family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Poppins:wght@400;600;700&family=Merriweather:ital,wght@0,400;0,700;1,400&display=swap');

/* ════════════════════════════════════════════════════════════════════════════
   L0 — PRIMITIVE PALETTE
   Raw values — referenced only by L1 semantic tokens
   ════════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Choreografy Blue (primary) ── */
  --prim-blue-50:  #EBF5FB;
  --prim-blue-100: #D6EAF8;
  --prim-blue-200: #AED6F1;
  --prim-blue-300: #85C1E9;
  --prim-blue-400: #5DADE2;
  --prim-blue-500: #3498DB;
  --prim-blue-600: #2E86C1;
  --prim-blue-700: #2980B9;
  --prim-blue-800: #1A5276;
  --prim-blue-900: #154360;

  /* ── Choreografy Orange (secondary) ── */
  --prim-orange-50:  #FEF9E7;
  --prim-orange-100: #FDEBD0;
  --prim-orange-200: #FAD7A0;
  --prim-orange-300: #F8C471;
  --prim-orange-400: #F5B041;
  --prim-orange-500: #E67E22;
  --prim-orange-600: #D35400;
  --prim-orange-700: #CA6F1E;
  --prim-orange-800: #A04000;
  --prim-orange-900: #7E5109;

  /* ── Warm Neutrals ── */
  --prim-warm-0:   #FFFFFF;
  --prim-warm-50:  #F9FAFB;
  --prim-warm-100: #F3F4F6;
  --prim-warm-200: #E5E7EB;
  --prim-warm-300: #D1D5DB;
  --prim-warm-400: #9CA3AF;
  --prim-warm-500: #6B7280;
  --prim-warm-600: #4B5563;
  --prim-warm-700: #374151;
  --prim-warm-800: #1F2937;
  --prim-warm-900: #111827;

  /* ── Dark surfaces ── */
  --prim-dark-950: #090C16;
  --prim-dark-900: #0E1120;
  --prim-dark-850: #141826;
  --prim-dark-800: #1C2135;
  --prim-dark-700: #30374E;
  --prim-dark-600: #4A5268;
  --prim-dark-500: #6E7A94;
  --prim-dark-400: #9AA3BC;
  --prim-dark-200: #DDE3F0;
  --prim-dark-50:  #F7F8FC;

  /* ── Teal (accent 3 — wellbeing) ── */
  --prim-teal-400: #48C9B0;
  --prim-teal-500: #16A085;
  --prim-teal-600: #0D9488;

  /* ── Purple (gradient mid — Choreografy vibrant) ── */
  --prim-purple-500: #8E44AD;
  --prim-purple-400: #A569BD;

  /* ── Emerald (success, growth) ── */
  --prim-emerald-300: #6EE7B7;
  --prim-emerald-400: #34D399;
  --prim-emerald-500: #10B981;
  --prim-emerald-600: #059669;

  /* ── Amber (warning) ── */
  --prim-amber-300: #FCD34D;
  --prim-amber-400: #FBBF24;
  --prim-amber-500: #F59E0B;
  --prim-amber-600: #D97706;

  /* ── Rose (danger) ── */
  --prim-rose-400: #F87171;
  --prim-rose-500: #EF4444;
  --prim-rose-600: #DC2626;
}

/* ════════════════════════════════════════════════════════════════════════════
   L1 — SEMANTIC TOKENS — LIGHT (Choreografy warm — DEFAULT)
   ════════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Surfaces ── */
  --bg:          var(--prim-warm-0);
  --bg-card:     var(--prim-warm-0);
  --bg-card-alt: var(--prim-warm-50);
  --bg-elevated: var(--prim-warm-100);
  --bg-overlay:  rgba(255, 255, 255, 0.92);
  --bg-hero:     linear-gradient(135deg, #F0F9FF 0%, #FFF8F5 50%, #F0F8FF 100%);

  /* ── Borders ── */
  --border:        var(--prim-warm-200);
  --border-subtle: var(--prim-warm-100);
  --border-active: var(--prim-blue-500);
  --border-hover:  var(--prim-warm-300);

  /* ── Text ── */
  --text-primary:   var(--prim-warm-800);
  --text-secondary: var(--prim-warm-500);
  --text-muted:     var(--prim-warm-400);
  --text-inverse:   var(--prim-warm-0);

  /* ── Accent — Choreografy Blue ── */
  --accent:         var(--prim-blue-500);
  --accent-hover:   var(--prim-blue-700);
  --accent-light:   var(--prim-blue-400);
  --accent-subtle:  rgba(52, 152, 219, 0.10);
  --accent-border:  rgba(52, 152, 219, 0.25);

  /* ── Secondary — Choreografy Orange ── */
  --accent-2:        var(--prim-orange-500);
  --accent-2-hover:  var(--prim-orange-600);
  --accent-2-subtle: rgba(230, 126, 34, 0.10);
  --accent-2-border: rgba(230, 126, 34, 0.25);

  /* ── Accent 3 — Teal (Choreografy) ── */
  --accent-3:        var(--prim-teal-500);
  --accent-3-subtle: rgba(22, 160, 133, 0.10);

  /* ── Gradients — Choreografy signature ── */
  --gradient-primary:   linear-gradient(135deg, #3498DB 0%, #5DADE2 100%);
  --gradient-secondary: linear-gradient(135deg, #E67E22 0%, #F39C12 100%);
  --gradient-vibrant:   linear-gradient(135deg, #3498DB 0%, #8E44AD 50%, #E67E22 100%);
  --gradient-card:      linear-gradient(135deg, #ffffff 0%, #fefefe 100%);
  --gradient-teal:      linear-gradient(135deg, #16A085 0%, #48C9B0 100%);

  /* ── Semantic ── */
  --success:        var(--prim-emerald-500);
  --success-subtle: rgba(16, 185, 129, 0.10);
  --warning:        var(--prim-amber-500);
  --warning-subtle: rgba(245, 158, 11, 0.10);
  --danger:         var(--prim-rose-500);
  --danger-subtle:  rgba(239, 68, 68, 0.10);

  /* ── Score tiers ── */
  --score-low:  var(--prim-orange-500);
  --score-mid:  var(--prim-amber-400);
  --score-high: var(--prim-emerald-500);

  /* ── Tool tiers ── */
  --tier-starter:      var(--prim-blue-500);
  --tier-intermediate: var(--prim-amber-500);
  --tier-advanced:     var(--prim-emerald-500);

  /* ── Backward-compat aliases ── */
  --red:       var(--prim-rose-600);
  --red-light: var(--accent);
  --orange:    var(--prim-orange-500);
  --gold:      var(--prim-amber-400);
  --green:     var(--prim-emerald-600);
  --indigo:    var(--prim-blue-500);

  /* ── Typography ── */
  --font:         'Inter', system-ui, -apple-system, sans-serif;
  --font-heading: 'Cardo', Georgia, serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* ── Type scale ── */
  --text-xs:   0.6875rem;
  --text-sm:   0.75rem;
  --text-base: 0.875rem;
  --text-md:   1rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;
  --text-3xl:  3rem;

  /* ── Spacing ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* Legacy aliases */
  --gap:    var(--space-4);
  --gap-sm: var(--space-2);

  /* ── Radii ── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius:      12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-card: 24px;
  --radius-full: 9999px;

  /* ── Shadows — blue-tinted (Choreografy) ── */
  --shadow-xs:      0 1px 2px rgba(52, 152, 219, 0.05);
  --shadow-sm:      0 2px 4px rgba(52, 152, 219, 0.08);
  --shadow:         0 4px 12px rgba(52, 152, 219, 0.12);
  --shadow-lg:      0 8px 25px rgba(52, 152, 219, 0.15);
  --shadow-xl:      0 12px 40px rgba(52, 152, 219, 0.18);
  --shadow-vibrant: 0 8px 32px rgba(52, 152, 219, 0.25);
  --shadow-glow:    0 0 0 2px var(--accent-border), 0 0 20px var(--accent-subtle);

  /* ── Transitions ── */
  --transition-fast:   150ms ease;
  --transition-base:   300ms ease;
  --transition-slow:   350ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ════════════════════════════════════════════════════════════════════════════
   L1 — SEMANTIC TOKENS — DARK (optional toggle)
   ════════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  color-scheme: dark; /* native form elements (radio, range, textarea) use browser dark defaults */

  /* ── Surfaces ── */
  --bg:          var(--prim-dark-900);
  --bg-card:     var(--prim-dark-850);
  --bg-card-alt: var(--prim-dark-800);
  --bg-elevated: var(--prim-dark-700);
  --bg-overlay:  rgba(14, 17, 32, 0.90);
  --bg-hero:     linear-gradient(135deg, #0E1120 0%, #141826 100%);

  /* ── Borders ── */
  --border:        rgba(93, 173, 226, 0.15);
  --border-subtle: rgba(93, 173, 226, 0.07);
  --border-active: var(--prim-blue-400);
  --border-hover:  rgba(93, 173, 226, 0.28);

  /* ── Text ── */
  --text-primary:   var(--prim-dark-50);
  --text-secondary: var(--prim-dark-400);
  --text-muted:     var(--prim-dark-500);
  --text-inverse:   var(--prim-dark-900);

  /* ── Accent — blue plus clair sur dark ── */
  --accent:         var(--prim-blue-400);
  --accent-hover:   var(--prim-blue-300);
  --accent-light:   var(--prim-blue-300);
  --accent-subtle:  rgba(93, 173, 226, 0.12);
  --accent-border:  rgba(93, 173, 226, 0.28);

  /* ── Secondary orange — plus clair sur dark ── */
  --accent-2:        var(--prim-orange-400);
  --accent-2-hover:  var(--prim-orange-300);
  --accent-2-subtle: rgba(245, 176, 65, 0.12);
  --accent-2-border: rgba(245, 176, 65, 0.25);

  /* ── Semantic ── */
  --success:        var(--prim-emerald-400);
  --success-subtle: rgba(52, 211, 153, 0.12);
  --warning:        var(--prim-amber-400);
  --warning-subtle: rgba(251, 191, 36, 0.12);
  --danger:         var(--prim-rose-400);
  --danger-subtle:  rgba(248, 113, 113, 0.12);

  /* ── Score tiers ── */
  --score-low:  var(--prim-orange-400);
  --score-mid:  var(--prim-amber-300);
  --score-high: var(--prim-emerald-400);

  /* ── Tool tiers ── */
  --tier-starter:      var(--prim-blue-400);
  --tier-intermediate: var(--prim-amber-400);
  --tier-advanced:     var(--prim-emerald-400);

  /* ── Shadows (dark) ── */
  --shadow-xs:      0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-sm:      0 2px 4px rgba(0, 0, 0, 0.42);
  --shadow:         0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg:      0 8px 25px rgba(0, 0, 0, 0.50);
  --shadow-xl:      0 12px 40px rgba(0, 0, 0, 0.55);
  --shadow-vibrant: 0 8px 32px rgba(93, 173, 226, 0.22);
  --shadow-glow:    0 0 0 1px var(--accent-border), 0 0 20px var(--accent-subtle);
}

/* ════════════════════════════════════════════════════════════════════════════
   L2 — BASE RESET & TYPOGRAPHY
   ════════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.65;
  background: var(--bg-hero);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  transition: background var(--transition-slow), color var(--transition-slow);
}

[data-theme="dark"] body {
  background: var(--bg);
}

input, select, textarea, button { font: inherit; }
button { cursor: pointer; }
/* Exclude .btn from link colouring — buttons (often rendered as <a>) must keep their own
   variant text colour on hover, not the global accent-hover blue (unreadable on blue/green). */
a:not(.btn) { color: var(--accent); text-decoration: none; }
a:not(.btn):hover { color: var(--accent-hover); }
img { max-width: 100%; display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
[x-cloak] { display: none !important; }

/* ── Heading system — Cardo Choreografy ── */
h1, h2, h3, .h-serif {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
}

/* Gradient text — Choreografy vibrant (light only) */
.heading--gradient {
  background: var(--gradient-vibrant);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-theme="dark"] .heading--gradient {
  -webkit-text-fill-color: var(--text-primary);
  background: none;
}

/* Sous-titre Cardo italic orange */
.heading--sub {
  font-family: var(--font-heading);
  font-weight: 400;
  font-style: italic;
  background: var(--gradient-secondary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-theme="dark"] .heading--sub {
  -webkit-text-fill-color: var(--accent-2);
  background: none;
}

/* Section heading avec ligne animée */
.section-heading {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--accent);
  position: relative;
  display: inline-block;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-6);
}
.section-heading::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 56px; height: 3px;
  background: var(--gradient-secondary);
  border-radius: var(--radius-full);
}

/* Print — neutralise gradient text */
@media print {
  .heading--gradient,
  .heading--sub {
    -webkit-text-fill-color: var(--text-primary);
    background: none;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   L3 — ANIMATIONS (Choreografy-inspired)
   ════════════════════════════════════════════════════════════════════════════ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.anim-fade-up            { animation: fadeInUp 0.5s ease-out both; }
.anim-fade-up--delay-1   { animation-delay: 0.08s; }
.anim-fade-up--delay-2   { animation-delay: 0.16s; }
.anim-fade-up--delay-3   { animation-delay: 0.24s; }

@keyframes floatOrganic {
  0%, 100% { transform: translate(0, 0) scale(1); border-radius: 50% 60% 70% 40%; }
  33%       { transform: translate(8px, -12px) scale(1.04); border-radius: 60% 40% 50% 70%; }
  66%       { transform: translate(-5px, 8px) scale(0.97); border-radius: 40% 70% 60% 50%; }
}

@keyframes scoreShimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ════════════════════════════════════════════════════════════════════════════
   L3 — THEME TOGGLE COMPONENT
   ════════════════════════════════════════════════════════════════════════════ */
.theme-toggle {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-2);
  box-shadow: var(--shadow);
  transition: all var(--transition-base);
}
.theme-toggle:hover { border-color: var(--border-hover); box-shadow: var(--shadow-lg); }

.theme-toggle__btn {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: var(--radius-full);
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--text-md);
  transition: all var(--transition-fast);
  cursor: pointer;
}
.theme-toggle__btn:hover { color: var(--text-secondary); background: var(--bg-card-alt); }
.theme-toggle__btn--active {
  background: var(--accent-subtle);
  color: var(--accent);
}

/* ════════════════════════════════════════════════════════════════════════════
   L4 — CORE BEM COMPONENTS
   ════════════════════════════════════════════════════════════════════════════ */

/* ── btn — pill Choreografy ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  font-size: var(--text-base);
  font-weight: 600;
  font-family: var(--font);
  line-height: 1;
  cursor: pointer;
  transition: transform var(--transition-bounce), box-shadow var(--transition-base), background var(--transition-fast);
  white-space: nowrap;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.btn:disabled { opacity: .45; pointer-events: none; }

.btn--primary {
  background: var(--gradient-primary);
  color: white;
  border-color: transparent;
  box-shadow: var(--shadow);
}
.btn--primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: var(--shadow-vibrant);
}

.btn--secondary {
  background: var(--gradient-secondary);
  color: white;
  border-color: transparent;
  box-shadow: var(--shadow);
}
.btn--secondary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 32px rgba(230, 126, 34, 0.30);
}

.btn--ghost {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent-border);
}
.btn--ghost:hover {
  background: var(--accent-subtle);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.btn--danger { background: var(--danger-subtle); color: var(--danger); border-color: var(--danger); }
.btn--danger:hover { background: var(--danger); color: white; }

.btn--sm  { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.btn--lg  { padding: var(--space-4) var(--space-8); font-size: var(--text-md); }
.btn--wide { width: 100%; }
.btn--full { width: 100%; }
.btn--icon { padding: var(--space-2); width: 36px; height: 36px; }

/* ── ds-card — Choreografy 24px radius ── */
.ds-card {
  background: var(--gradient-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  box-shadow: var(--shadow);
  transition: transform var(--transition-bounce), box-shadow var(--transition-base), border-color var(--transition-fast);
  position: relative;
  overflow: hidden;
}
[data-theme="dark"] .ds-card {
  background: var(--bg-card);
}
.ds-card--elevated { box-shadow: var(--shadow-lg); }
.ds-card--hover:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
  border-color: var(--accent-border);
}
.ds-card--accent {
  border-color: var(--accent-border);
  background: linear-gradient(135deg, rgba(52,152,219,0.06) 0%, transparent 100%);
}

/* Organic glow on hover */
.ds-card--hover::before {
  content: '';
  position: absolute;
  top: -40%; right: -40%;
  width: 80%; height: 80%;
  background: radial-gradient(ellipse, var(--accent-subtle) 0%, transparent 70%);
  border-radius: 50%;
  opacity: 0;
  transition: opacity var(--transition-base);
  pointer-events: none;
}
.ds-card--hover:hover::before { opacity: 1; }

/* Legacy .card alias */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  box-shadow: var(--shadow);
}
.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  gap: var(--space-3);
}
.card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-md);
  color: var(--text-primary);
}
.card__subtitle {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: var(--space-3);
}

/* ── ds-badge — pill Choreografy ── */
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ds-badge--accent  { background: var(--accent-subtle);   color: var(--accent); }
.ds-badge--orange  { background: var(--accent-2-subtle); color: var(--accent-2); }
.ds-badge--success { background: var(--success-subtle);  color: var(--success); }
.ds-badge--warning { background: var(--warning-subtle);  color: var(--warning); }
.ds-badge--danger  { background: var(--danger-subtle);   color: var(--danger); }
.ds-badge--muted   { background: var(--bg-card-alt);     color: var(--text-muted); }
.ds-badge--teal    { background: var(--accent-3-subtle); color: var(--accent-3); }
/* Legacy color names */
.ds-badge--purple  { background: var(--accent-2-subtle); color: var(--accent-2); }
.ds-badge--tier-a  { background: var(--success-subtle);  color: var(--success); }
.ds-badge--tier-b  { background: var(--warning-subtle);  color: var(--warning); }
.ds-badge--tier-c  { background: var(--bg-card-alt);     color: var(--text-muted); }

/* Legacy .tag alias */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  background: var(--bg-card-alt);
}
.tag-f { background: var(--accent-subtle); color: var(--accent); border-color: var(--accent-border); }

/* ── ds-input ── */
.ds-input {
  background: var(--bg-card-alt);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-base);
  width: 100%;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
}
.ds-input:focus {
  border-color: var(--border-active);
  box-shadow: var(--shadow-glow);
  background: var(--bg-card);
}
.ds-input::placeholder { color: var(--text-muted); }
.ds-input[disabled] { opacity: .5; cursor: not-allowed; }
.ds-input--error { border-color: var(--danger); }
select.ds-input { appearance: none; border-radius: var(--radius-lg); }
textarea.ds-input { resize: vertical; min-height: 80px; border-radius: var(--radius-lg); }

/* ── ds-label ── */
.ds-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: var(--space-2);
}

/* ── ds-divider ── */
.ds-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-6) 0;
}

/* ── ds-section-title ── */
.ds-section-title {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.ds-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ── ds-score-bar ── */
.ds-score-bar {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--border);
  overflow: hidden;
}
.ds-score-bar__fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}
.ds-score-bar__fill--low  { background: var(--score-low); }
.ds-score-bar__fill--mid  { background: var(--score-mid); }
.ds-score-bar__fill--high { background: var(--gradient-teal); }

/* ── ds-kpi — Cardo values ── */
.ds-kpi {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-bounce), box-shadow var(--transition-base);
}
.ds-kpi:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.ds-kpi__value {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
[data-theme="dark"] .ds-kpi__value {
  -webkit-text-fill-color: var(--accent);
  background: none;
}
.ds-kpi__label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}

/* ── ds-alert ── */
.ds-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  font-size: var(--text-base);
  line-height: 1.55;
}
.ds-alert__icon { font-size: var(--text-md); flex-shrink: 0; margin-top: 1px; }
.ds-alert--info    { background: var(--accent-subtle);  border-color: var(--accent-border);   color: var(--text-primary); }
.ds-alert--warning { background: var(--warning-subtle); border-color: var(--warning);         color: var(--text-primary); }
.ds-alert--danger  { background: var(--danger-subtle);  border-color: var(--danger);          color: var(--text-primary); }
.ds-alert--success { background: var(--success-subtle); border-color: var(--success);         color: var(--text-primary); }

/* ── ds-table ── */
.ds-table { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
.ds-table th {
  background: var(--bg-card-alt);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.ds-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}
.ds-table tr:last-child td { border-bottom: none; }
.ds-table tr:hover td { background: var(--bg-card-alt); }

/* ── ds-nav sidebar ── */
.ds-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ds-nav__section {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  padding: var(--space-4) var(--space-4) var(--space-2);
}
.ds-nav__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-base);
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
  border-left: 3px solid transparent;
  transition: all var(--transition-fast);
  text-decoration: none;
}
.ds-nav__item:hover {
  background: var(--accent-subtle);
  color: var(--text-primary);
}
.ds-nav__item--active {
  background: var(--accent-subtle);
  color: var(--accent);
  border-left-color: var(--accent);
  font-weight: 600;
}

/* ── ds-progress — gradient blue→teal ── */
.ds-progress {
  height: 6px;
  background: var(--border);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.ds-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-3) 100%);
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}

/* ── ds-toast ── */
.ds-toast {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  z-index: 10000;
  white-space: nowrap;
}

/* ── checkbox ── */
input[type="checkbox"].ds-check {
  accent-color: var(--accent);
  width: 15px; height: 15px;
  cursor: pointer;
}

/* ── field (legacy BepSun) ── */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.field__input {
  background: var(--bg-card-alt);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-base);
  width: 100%;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
}
.field__input:focus {
  border-color: var(--border-active);
  box-shadow: var(--shadow-glow);
  background: var(--bg-card);
}
.field__input::placeholder { color: var(--text-muted); }
.field__input--select { appearance: none; border-radius: var(--radius-lg); }
.field__error { font-size: var(--text-sm); color: var(--danger); }

/* ── Utilities ── */
.u-text-muted     { color: var(--text-muted); }
.u-text-secondary { color: var(--text-secondary); }
.u-text-accent    { color: var(--accent); }
.u-text-success   { color: var(--success); }
.u-text-warning   { color: var(--warning); }
.u-text-danger    { color: var(--danger); }
.u-font-mono      { font-family: var(--font-mono); }
.u-font-bold      { font-weight: 700; }
.u-font-semibold  { font-weight: 600; }
.u-font-serif     { font-family: var(--font-heading); }
.u-text-sm        { font-size: var(--text-sm); }
.u-text-xs        { font-size: var(--text-xs); }
.u-truncate       { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-gradient-text  {
  background: var(--gradient-vibrant);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}