/*
  Self-hosted Montserrat (body). Headline font Glacial Indifference falls back to sans-serif
  until it's web-licensed. (Design-system display font Changa One was tried and dropped — too heavy.)
*/
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/shared/assets/fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/shared/assets/fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Changa One — display font, used ONLY for the hero headline (design system signature). */
@font-face {
  font-family: 'Changa One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/shared/assets/fonts/changa-one-latin.woff2') format('woff2');
}

/*
  LevelUp English Design System (Claude Design, "Made by Ed") — purple ramp + gold/green accents.
  Existing components reference the semantic aliases (--lu-text-primary etc.); those are remapped
  onto the new ramp so the whole page reskins from this one layer.
*/
:root {
  /* Design-system palette */
  --lu-purple-50:  #f4eefc;
  --lu-purple-100: #e6dafa;
  --lu-purple-200: #d4c1f7;
  --lu-purple-300: #bfa3f0;
  --lu-purple-400: #a98be6;
  --lu-purple-500: #8b6fd9;   /* primary accent */
  --lu-purple-700: #3c1b5e;
  --lu-purple-900: #1f0a3a;   /* deep purple — dark bands */
  --lu-deep:       #2d1354;   /* catalogue's dominant deep purple (headlines/dark) */
  --lu-lavender-mid: #c9b1f0; /* medium lavender band */
  --lu-ink:        #1a0b2e;   /* text ink */
  --lu-gold:       #f2b52e;   /* warm gold accent */
  --lu-cream:      #f7e7c9;   /* warm cream accent */
  --lu-green:      #52c98a;
  --lu-paper:      #e0dcd4;
  --lu-white:      #ffffff;

  /* Semantic aliases (existing components) remapped to the design system */
  --lu-text-primary: var(--lu-purple-900); /* dark brand: primary text + dark bands */
  --lu-accent-core:  var(--lu-purple-500); /* primary accent, buttons, borders */
  --lu-beige:        var(--lu-purple-50);  /* light surface (was cream) */
  --lu-turquoise:    var(--lu-green);       /* checkmarks / positive accent */
  --lu-orange:       var(--lu-gold);        /* warm highlight */
  --lu-ink-alt:      var(--lu-ink);

  /* Generic aliases used by shared components */
  --color-bg: var(--lu-white);
  --color-text: var(--lu-ink);
  --color-muted: #6b5f7a;
  --color-accent: var(--lu-accent-core);
  --color-accent-contrast: var(--lu-white); /* text on the accent button */
  --max-width: 720px;
  --radius: 20px; /* cards; buttons are pill (below) */

  --font-headline: 'Glacial Indifference', sans-serif;
  --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
}

h1, h2, h3, .headline {
  font-family: var(--font-headline);
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 4rem 1.5rem;
}

header.hero h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.2;
  margin: 0 0 1rem;
  font-weight: 400; /* hero titles use headline font at Regular weight, not Bold */
}

header.hero p.subhead {
  font-size: 1.15rem;
  color: var(--color-muted);
  margin: 0 0 2rem;
}

section {
  margin: 2.5rem 0;
}

section h2 {
  font-size: 1.35rem;
  margin: 0 0 0.75rem;
}

.cta-button {
  display: inline-block;
  background: var(--lu-text-primary);
  color: var(--lu-white);
  text-decoration: none;
  font-weight: 600;
  padding: 0.9rem 1.75rem;
  border-radius: 999px; /* design system: pill buttons */
}

.cta-button:hover {
  opacity: 0.9;
}

footer {
  margin-top: 3rem;
  font-size: 0.85rem;
  color: var(--color-muted);
}