:root,
:root[data-theme="light"] {
  --bg-main: #ffffff;
  --bg-soft: #f8fafc;
  --card-bg: #ffffff;
  --card-border: rgba(16, 24, 40, 0.08);
  --text-main: #101828;
  --text-muted: #6a7282;
  --nav-bg: #1d293d;
  --chip-border: #e2e8f0;
  --chip-text: #45556c;
  --surface-1: #ffffff;
  --surface-2: #f8fafc;
  --surface-3: #eef2f7;
  --border-soft: #e2e8f0;
  --border-strong: #cbd5e1;
  --brand: #111827;
  --brand-contrast: #f8fafc;
  --success: #047857;
  --danger-soft: #fee4e2;
  --success-soft: #dff5e8;
  --warning-soft: #fef3c7;
  --ink-900: #0f172a;
  --ink-800: #1f2937;
  --ink-750: #374151;
  --ink-700: #334155;
  --ink-650: #4e5668;
  --ink-640: #475467;
  --ink-620: #5f6b7a;
  --ink-600: #6b7280;
  --ink-500: #64748b;
  --ink-400: #94a3b8;
  --border-subtle: #e5e7eb;
  --danger-strong: #b42318;
  --shadow-1: 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-2: 0 8px 24px rgba(15, 23, 42, 0.1);
  --shadow-3: 0 16px 34px rgba(15, 23, 42, 0.14);
  --surface-card-shadow: 0 6px 16px rgba(55, 38, 23, 0.12);
  --page-gutter: 24px;
  --app-max-width: 399px;
  --card-radius-xl: 32px;
  --accent-pink: #101828;
  --accent-cyan: #101828;
  --accent-yellow: #101828;
  --danger: #c93e57;
  --radius-lg: 16px;
  --radius-md: 12px;
  --font-body: "Arimo", sans-serif;
  --font-display: "Arimo", sans-serif;
  --bottom-nav-bg: rgba(255, 255, 255, 0.985);
  --bottom-nav-border: rgba(15, 23, 42, 0.1);
  --bottom-nav-shadow: 0 8px 20px rgba(15, 23, 42, 0.14);
  --bottom-nav-text: #72819a;
  --bottom-nav-active-bg: #1d293d;
  --bottom-nav-active-text: #f8fafc;
  --chip-active-bg: #1d293d;
  --chip-active-text: #f8fafc;
  --chip-active-border: #1d293d;
  --overlay-backdrop: rgba(19, 14, 12, 0.36);
  --course-cta-bg: #1d293d;
  --course-cta-text: #f8fafc;
  --course-cta-border: #1d293d;
  --course-cta-shadow: 0 8px 22px rgba(15, 23, 42, 0.24);
  --dir-salsa-bg: #f8d5ac;
  --dir-bachata-bg: #dec5f6;
  --dir-kizomba-bg: #c7d2ff;
  --dir-salsa-title: #441306;
  --dir-bachata-title: #3c0366;
  --dir-kizomba-title: #1e1a4d;
  --dir-badge-bg: rgba(255, 255, 255, 0.62);
  --lesson-free-badge-bg: #dff4e5;
  --lesson-free-badge-text: #1f7a36;
  --lesson-audio-pill-bg: rgba(255, 255, 255, 0.6);
  --lesson-audio-pill-text: var(--chip-text);
  --lesson-next-btn-bg: #1d293d;
  --lesson-next-btn-text: #f8fafc;
  --lesson-next-btn-shadow: 0 8px 22px rgba(15, 23, 42, 0.24);
  --course-hero-border: rgba(255, 255, 255, 0.62);
  --course-hero-meta-muted: rgba(16, 24, 40, 0.6);
  --course-share-btn-bg: rgba(255, 255, 255, 0.56);
  --course-share-btn-bg-hover: rgba(255, 255, 255, 0.78);
  --course-share-btn-border: rgba(78, 86, 104, 0.2);
  --course-share-btn-icon: rgba(16, 24, 40, 0.72);
  --action-btn-bg: rgba(255, 255, 255, 0.56);
  --action-btn-bg-hover: rgba(255, 255, 255, 0.78);
  --action-btn-border: rgba(78, 86, 104, 0.2);
  --action-btn-icon: rgba(16, 24, 40, 0.72);
  --action-btn-shadow: 0 2px 8px rgba(16, 24, 40, 0.06);
  --course-pill-bg: rgba(255, 255, 255, 0.74);
  --course-pill-border: rgba(78, 86, 104, 0.15);
  --course-pill-text: #253149;
  --course-purchased-badge-bg: rgba(223, 244, 229, 0.95);
  --course-purchased-badge-text: #1f7a36;
  --studio-hero-bg-start: #e8edf2;
  --studio-hero-bg-end: #dde5ee;
  --studio-hero-border: rgba(148, 163, 184, 0.26);
  --studio-avatar-fallback-bg: #eef2f7;
  --studio-tabs-bg: rgba(255, 255, 255, 0.5);
  --studio-tabs-border: rgba(148, 163, 184, 0.28);
  --studio-tabs-text: var(--ink-620);
  --studio-tabs-active-bg: #1d293d;
  --studio-tabs-active-text: #f8fafc;
  --studio-tabs-active-shadow: 0 4px 12px rgba(29, 41, 61, 0.2);
  --hero-radius-bottom: 42px;
  --hero-padding-x: 24px;
  --hero-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  --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.26);
  --lesson-media-hero-overlay-end: rgba(0, 0, 0, 0.56);
  --lesson-media-hero-sheen-a: rgba(255, 255, 255, 0.08);
  --lesson-media-hero-sheen-b: rgba(255, 255, 255, 0.05);
  --lesson-media-hero-fallback-overlay-start: rgba(0, 0, 0, 0.2);
  --lesson-media-hero-fallback-overlay-end: rgba(0, 0, 0, 0.48);
}

body {
  background:
    radial-gradient(120% 60% at 50% -10%, #f1f5f9 0%, transparent 60%),
    linear-gradient(180deg, var(--surface-2) 0%, var(--surface-1) 42%);
}