:root {
  /* Fonts — index.dc.html */
  --font-sans: 'Public Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;

  /* Colors — index.dc.html */
  --bg-page: #fcfaf5;
  --bg-muted: #f4eee1;
  --bg-cream: #efe7d6;
  --bg-nav: #fbf8f1;
  --bg-card: #fff;
  --bg-dark: #211c16;
  --bg-ad: #f6f0e4;

  --text-primary: #211c16;
  --text-secondary: #5f594f;
  --text-muted: #8a8377;
  --text-nav: #6e675b;
  --text-link: #4a443b;
  --text-inverse: #fcfaf5;
  --text-on-yellow: #2a2521;
  --text-on-orange: #2a2521;
  --text-ad: #b4a88f;

  --border: #eae2d4;
  --border-soft: #f0eadc;
  --border-ad: #d8cdb9;

  --accent: #c8562f;
  --accent-soft: #fbf1e9;

  /* Type scale — index.dc.html (px for exact parity) */
  --fs-hero: 60px;
  --fs-h2: 28px;
  --fs-logo: 18px;
  --fs-body-lg: 18px;
  --fs-btn: 16px;
  --fs-card-name: 22px;
  --fs-card-num: 15px;
  --fs-card-body: 15px;
  --fs-nav: 14.5px;

  /* Lesson / exercise / quiz masthead (client Jul 28 — unified) */
  --masthead-title-size: 42px;
  --masthead-subtitle-size: 23px;
  --masthead-subtitle-weight: 500;
  --masthead-lesson-label-size: 0.9375rem;
  --fs-explore-link: 14.5px;
  --fs-footer: 13.5px;
  --fs-ad: 12px;
  --fs-explore-heading: 11.5px;
  --fs-eyebrow: 10px;
  --fs-body: 16px;

  --lh-hero: 0.98;
  --lh-body: 1.6;
  --lh-card: 1.45;
  --lh-nav: 1;

  --ls-hero: -0.03em;
  --ls-display: -0.02em;
  --ls-tight: -0.01em;
  --ls-eyebrow: 0.12em;
  --ls-label: 0.08em;

  --radius-sm: 4px;
  --radius: 8px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --shadow: 0 8px 28px rgb(33 28 22 / 6%);

  --content-max: 1180px;
  --header-height: auto;

  /* Spacing — index.dc.html exact */
  --page-gutter-x: 32px;
  --page-gutter-x-sm: 16px;
  --header-pad-y: 16px;
  --hero-pad-top: 64px;
  --hero-pad-bottom: 44px;
  --hero-gap: 48px;
  --hero-title-mb: 20px;
  --hero-intro-mb: 30px;
  --hero-actions-gap: 12px;
  --hero-video-w: 420px;
  --hero-video-h: 236px;
  --btn-pad-y: 16px;
  --btn-pad-x: 28px;
  --btn-pad-x-sm: 24px;
  --levels-pad-top: 16px;
  --levels-pad-bottom: 8px;
  --levels-head-mb: 18px;
  --levels-gap: 12px;
  --level-card-pad: 18px 18px 20px;
  --level-card-pad-unsure: 18px;
  --level-card-h: 168px;
  --level-name-mt: 2px;
  --level-name-mb: 8px;
  --level-unsure-blurb-mt: 6px;
  --explore-mt: 44px;
  --explore-pad-top: 40px;
  --explore-pad-bottom: 12px;
  --explore-title-mb: 22px;
  --explore-cols-gap: 32px;
  --explore-heading-mb: 13px;
  --explore-links-gap: 10px;
  --ad-pad-y: 36px;
  --ad-h: 100px;
  --footer-bar-pad-y: 22px;
  --logo-gap: 10px;
  --nav-gap: 26px;

  --level-blue: #2f6db5;
  --level-red: #c63b34;
  --level-yellow: #efb420;
  --level-green: #277a48;
  --level-purple: #7a50b8;
  --level-orange: #d9721e;
  --level-violet: #a0409b;
  --level-aqua: #0d9488;
  --level-maroon: #9f2d55;

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
}

[data-level='blue'] { --accent-level: var(--level-blue); --level-color: var(--level-blue); }
[data-level='red'] { --accent-level: var(--level-red); --level-color: var(--level-red); }
[data-level='yellow'] { --accent-level: var(--level-yellow); --level-color: var(--level-yellow); }
[data-level='green'] { --accent-level: var(--level-green); --level-color: var(--level-green); }
[data-level='purple'] { --accent-level: var(--level-purple); --level-color: var(--level-purple); }
[data-level='orange'] { --accent-level: var(--level-orange); --level-color: var(--level-orange); }
[data-level='violet'] { --accent-level: var(--level-violet); --level-color: var(--level-violet); }
[data-level='aqua'] { --accent-level: var(--level-aqua); --level-color: var(--level-aqua); }
[data-level='maroon'] { --accent-level: var(--level-maroon); --level-color: var(--level-maroon); }
[data-level='prepositions'] {
  --accent-level: #0f766e;
  --level-color: #0f766e;
  --blue-lesson: #0f766e;
}
[data-level='listening-lab'] {
  --accent-level: #0f766e;
  --level-color: #0f766e;
}
[data-level='dictation-exercises'] {
  --accent-level: #1e4d6b;
  --level-color: #1e4d6b;
}
[data-level='write-in-english'] {
  --accent-level: #3f5f6b;
  --level-color: #3f5f6b;
}
[data-level='think-in-english'] {
  --accent-level: #4a5d4e;
  --level-color: #4a5d4e;
}