/* ==========================================================================
   Perfecting Primary English — landing page
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
  /* --- Brand palette ------------------------------------------------------- */
  --ppe-navy:#252d73;
  --ppe-navy-deep:#171c4f;
  --ppe-magenta:#a51e65;
  --ppe-gold:#e8ad1b;
  --ppe-ink:#191b34;
  --ppe-white:#fff;

  /* --- Strand palette ------------------------------------------------------ */
  --strand-comprehension:#2a9d6e;
  --strand-comprehension-deep:#12543c;
  --strand-comprehension-tint:#dff2e9;
  --strand-comprehension-on-dark:#5fd3a0;
  --strand-writing:#2b7fbf;
  --strand-writing-deep:#174f78;
  --strand-writing-tint:#dcecf8;
  --strand-writing-on-dark:#7cc0ef;
  --strand-grammar:#e8721a;
  --strand-grammar-deep:#8a400b;
  --strand-grammar-tint:#fceadb;
  --strand-grammar-on-dark:#ffa75c;

  --rgb-navy:37,45,115;
  --rgb-magenta:165,30,101;
  --rgb-ink:25,27,52;
  --rgb-white:255,255,255;
  --rgb-gold:232,173,27;

  /* --- Surfaces --- */
  --surface-page:#fffdf9;
  --surface-raised:var(--ppe-white);
  --surface-mist:#eef1fb;
  --surface-invert:var(--ppe-navy);
  --surface-invert-deep:var(--ppe-navy-deep);
  --surface-paper:#fffdf6;

  /* --- Text --- */
  --text-strong:var(--ppe-ink);
  --text-body:#3b3f58;
  --text-muted-on-light:#5d6176;
  --text-muted:var(--text-muted-on-light);
  --text-on-invert:var(--ppe-white);
  --text-on-invert-muted:rgba(var(--rgb-white),0.82);

  /* --- Lines & shadows --- */
  --line:rgba(var(--rgb-ink),0.12);
  --line-strong:rgba(var(--rgb-ink),0.22);
  --guide-rule:rgba(var(--rgb-navy),0.15);
  --paper-rule:rgba(var(--rgb-navy),0.16);
  --shadow-sm:0 2px 10px rgba(var(--rgb-navy),0.07);
  --shadow-md:0 12px 32px rgba(var(--rgb-navy),0.12);
  --shadow-lg:0 26px 60px rgba(var(--rgb-navy),0.18);
  --shadow-pop:0 6px 0 rgba(var(--rgb-ink),0.18);
  --shadow-cast:0 20px 40px rgba(0,0,0,0.35);
  --shadow-guide:0 8px 7px rgba(var(--rgb-navy),0.1);
  --shadow-paper:0 3px 0 rgba(var(--rgb-ink),0.12), 0 18px 36px rgba(var(--rgb-navy),0.2);

  /* --- Type --- */
  --font-display:'Fredoka', 'Avenir Next', system-ui, sans-serif;
  --font-body:'Nunito', 'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --step-hero:clamp(2.2rem, 1.2rem + 4.2vw, 4.2rem);
  --hero-fit:10cqi;
  --step-h2:clamp(1.8rem, 1.2rem + 2.2vw, 2.9rem);
  --step-h3:clamp(1.35rem, 1.15rem + 0.8vw, 1.8rem);
  --step-lede:clamp(1.05rem, 1rem + 0.45vw, 1.3rem);
  --step-small:0.92rem;

  /* --- Space & shape --- */
  --container:1140px;
  --gutter:1.1rem;
  --section-y:3.5rem;
  --band-arc:26px;
  --letter-scale:1;
  --radius-paper:6px;
  --radius-sm:12px;
  --radius:20px;
  --radius-lg:32px;
  --radius-pill:999px;
  --author-avatar-size:clamp(6rem, 12vw, 8rem);

  /* --- Motion --- */
  --dur:220ms;
  --dur-slow:600ms;
  --ease:cubic-bezier(0.2,0.7,0.3,1);
  --ease-pop:cubic-bezier(0.34,1.56,0.64,1);
  --marquee-dur:38s;
  --review-hold:9s;
  --author-wave-dur:8s;
  --author-wave-delay:-3s;
}