:root[data-theme="dark"] {
  --bg-main: #0b1220;
  --bg-soft: #0f172a;
  --card-bg: #111b2e;
  --card-border: rgba(148, 163, 184, 0.24);
  --text-main: #e5edf8;
  --text-muted: #9fb0c8;
  --nav-bg: #0f172a;
  --chip-border: #334155;
  --chip-text: #c7d3e7;
  --surface-1: #111b2e;
  --surface-2: #0f172a;
  --surface-3: #162236;
  --border-soft: #2a3a55;
  --border-strong: #3b4f70;
  --brand: #e2e8f0;
  --brand-contrast: #0b1220;
  --success: #34d399;
  --danger-soft: rgba(239, 68, 68, 0.18);
  --success-soft: rgba(16, 185, 129, 0.16);
  --warning-soft: rgba(245, 158, 11, 0.2);
  --ink-900: #e2e8f0;
  --ink-800: #cbd5e1;
  --ink-750: #b8c4d8;
  --ink-700: #aebdd5;
  --ink-650: #97a6bf;
  --ink-640: #8ea1bc;
  --ink-620: #8397b5;
  --ink-600: #7d90ad;
  --ink-500: #7083a1;
  --ink-400: #5f7494;
  --border-subtle: #273852;
  --danger-strong: #ef4444;
  --shadow-1: 0 1px 3px rgba(2, 6, 23, 0.45);
  --shadow-2: 0 10px 26px rgba(2, 6, 23, 0.5);
  --shadow-3: 0 18px 38px rgba(2, 6, 23, 0.6);
  --surface-card-shadow: var(--shadow-1);
  --accent-pink: #e2e8f0;
  --accent-cyan: #e2e8f0;
  --accent-yellow: #e2e8f0;
  --danger: #f87171;
  --bottom-nav-bg: rgba(28, 40, 61, 0.92);
  --bottom-nav-border: rgba(167, 181, 202, 0.34);
  --bottom-nav-shadow: 0 10px 26px rgba(2, 6, 23, 0.55);
  --bottom-nav-text: #d0dbeb;
  --bottom-nav-active-bg: #0b1220;
  --bottom-nav-active-text: #f8fafc;
  --chip-active-bg: #24324b;
  --chip-active-text: #f8fafc;
  --chip-active-border: #5a7398;
  --overlay-backdrop: rgba(6, 12, 24, 0.68);
  --course-cta-bg: #dbe7ff;
  --course-cta-text: #0b1220;
  --course-cta-border: #f8fafc;
  --course-cta-shadow: 0 10px 26px rgba(2, 6, 23, 0.5);
  --dir-salsa-bg: #6a4a2c;
  --dir-bachata-bg: #563f78;
  --dir-kizomba-bg: #334b7a;
  --dir-salsa-title: #ffe9d1;
  --dir-bachata-title: #f4e8ff;
  --dir-kizomba-title: #e8efff;
  --dir-badge-bg: rgba(255, 255, 255, 0.24);
  --lesson-free-badge-bg: rgba(52, 211, 153, 0.24);
  --lesson-free-badge-text: #86efac;
  --lesson-audio-pill-bg: rgba(255, 255, 255, 0.2);
  --lesson-audio-pill-text: #d6e3f5;
  --lesson-next-btn-bg: #dbe7ff;
  --lesson-next-btn-text: #0b1220;
  --lesson-next-btn-shadow: 0 10px 26px rgba(2, 6, 23, 0.5);
  --course-hero-border: rgba(255, 255, 255, 0.26);
  --course-hero-meta-muted: rgba(230, 238, 251, 0.82);
  --course-share-btn-bg: #dbe7ff;
  --course-share-btn-bg-hover: #cfdfff;
  --course-share-btn-border: #f8fafc;
  --course-share-btn-icon: #0b1220;
  --action-btn-bg: #dbe7ff;
  --action-btn-bg-hover: #cfdfff;
  --action-btn-border: #f8fafc;
  --action-btn-icon: #0b1220;
  --action-btn-shadow: 0 10px 26px rgba(2, 6, 23, 0.5);
  --course-pill-bg: rgba(255, 255, 255, 0.22);
  --course-pill-border: rgba(255, 255, 255, 0.32);
  --course-pill-text: #f8fafc;
  --course-purchased-badge-bg: rgba(16, 185, 129, 0.24);
  --course-purchased-badge-text: #b7f7d2;
  --studio-hero-bg-start: #1a2840;
  --studio-hero-bg-end: #162338;
  --studio-hero-border: rgba(148, 163, 184, 0.22);
  --studio-avatar-fallback-bg: #1f2d44;
  --studio-tabs-bg: rgba(17, 27, 46, 0.62);
  --studio-tabs-border: rgba(148, 163, 184, 0.28);
  --studio-tabs-text: #c7d3e7;
  --studio-tabs-active-bg: #dbe7ff;
  --studio-tabs-active-text: #0b1220;
  --studio-tabs-active-shadow: 0 8px 18px rgba(2, 6, 23, 0.42);
  --hero-radius-bottom: 42px;
  --hero-padding-x: 24px;
  --hero-shadow: 0 10px 24px rgba(2, 6, 23, 0.42);
  --studio-hero-padding-top: 16px;
  --studio-hero-padding-bottom: 16px;
  --course-hero-padding-top: 16px;
  --course-hero-padding-bottom: 24px;
  --lesson-media-hero-height: 300px;
  --lesson-media-hero-overlay-start: rgba(0, 0, 0, 0.3);
  --lesson-media-hero-overlay-end: rgba(0, 0, 0, 0.62);
  --lesson-media-hero-sheen-a: rgba(255, 255, 255, 0.09);
  --lesson-media-hero-sheen-b: rgba(255, 255, 255, 0.06);
  --lesson-media-hero-fallback-overlay-start: rgba(0, 0, 0, 0.24);
  --lesson-media-hero-fallback-overlay-end: rgba(0, 0, 0, 0.54);
}

:root[data-theme="dark"] body {
  background:
    radial-gradient(120% 60% at 50% -10%, #17243a 0%, transparent 60%),
    linear-gradient(180deg, var(--surface-2) 0%, var(--surface-1) 42%);
}