/* Design tokens — real Figma values. The fluid recipe and the 700→1440
   ramp live in CLAUDE.md; deliberate deviations from real source values
   and the per-section ramp exceptions live in decisions.md. */
:root {
  --color-text: #1c1c1c;
  --color-cards-bg: #ffffff;
  --color-bg: #f2f2f2;
  --color-accent: #cbffa0;
  --color-accent-buttons: #b8f685;

  --opacity-secondary-text: 0.7;

  --radius-label: 60px;

  --radius-big: 32px;
  --radius-big-mobile: 24px;

  --radius-medium: 24px;
  --radius-medium-mobile: 20px;

  /* Page zoom: 1 between the anchors, the whole 1440 design scaled up
     to 1728 and the 390 design scaled down to 0.9 at 351 (see the
     blocks below). Everything that reads the viewport in px must
     divide by it — vw is the real viewport, the layout is zoomed. */
  --zoom: 1;

  --section-padding-x: max(60px, calc((100vw / var(--zoom) - 1680px) / 2));
  --section-padding-x-mobile: 20px;

  --section-spacing: clamp(120px, calc(90.29px + 7.619vw), 227.43px);

  --section-name-to-section: clamp(24px, calc(12.649px + 1.62162vw), 36px);

  --gap-content-to-cta: clamp(10px, calc(0.541px + 1.35135vw), 20px);

  --gap-heading-to-subtitle: clamp(10px, calc(4.324px + 0.81081vw), 16px);

  --card-padding-m-block: 30px;

  --header-height: 87px;
  --header-height-mobile: 63px;

  --font-size-nav: 18px;

  --font-size-h1-hero: clamp(28px, calc(18.29px + 3.036vw), 62px);
  --font-size-body-hero: clamp(16px, calc(14.51px + 0.381vw), 20px);
  --font-size-button-l: clamp(16px, calc(14.86px + 0.357vw), 20px);
  --font-size-label-m: clamp(12px, calc(11.26px + 0.190vw), 14px);

  --font-size-h2-section: clamp(28px, calc(7.189px + 2.97297vw), 50px);
  --font-size-label-accent: clamp(14px, calc(10.216px + 0.54054vw), 18px);
  --font-size-h3-card-l: clamp(20px, calc(8.649px + 1.62162vw), 32px);
  --font-size-body-card-l: clamp(14px, calc(8.324px + 0.81081vw), 20px);
  --font-size-h3-card-m: clamp(20px, calc(12.432px + 1.08108vw), 28px);
  --font-size-body-card-s: clamp(14px, calc(12.108px + 0.27027vw), 16px);

  --font-size-button-cta: clamp(18px, calc(16.108px + 0.27027vw), 20px);

  --font-size-h3-card-xs: clamp(20px, calc(16.216px + 0.54054vw), 24px);
  --font-size-body-card-m: clamp(14px, calc(10.216px + 0.54054vw), 18px);

  --font-size-h3-card-xs-for-you-if: clamp(22px, calc(20.108px + 0.27027vw), 24px);

  --font-primary: 'Google Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --font-family-accent: 'Lacquer', cursive;

  --font-size-name-curator: clamp(28px, calc(-4.57px + 4.762vw), 64px); /* floor 28 over the frame's 24, her call */
  --font-size-body-curator: clamp(14px, calc(8.29px + 0.9524vw), 22px);

  --font-size-h4-under-card-m: clamp(14px, calc(12.108px + 0.27027vw), 16px);
  --font-size-h4-under-card-l: clamp(18px, calc(14.216px + 0.54054vw), 22px);

  --font-size-name-teacher: clamp(24px, calc(8.865px + 2.16216vw), 40px);

  --font-size-number-badge: clamp(20px, calc(10.966px + 1.29054vw), 29.55px);

  --font-size-h5-curriculum: clamp(18px, calc(8.541px + 1.35135vw), 28px);
}

/* Outside the anchors the whole page zooms instead of reflowing (her
   call): above 1440 the desktop design grows 1:1 up to a 16" MacBook
   Pro (1728, ×1.2) and stays there, wider screens gaining page
   gutters; below 390 the mobile design shrinks, floored at 0.9
   (351px) so 14px copy never drops under 12.6. Engines without length
   division in calc() get the unzoomed page. */
@supports (zoom: calc(100vw / 1440px)) {
  @media (min-width: 1441px) {
    :root { --zoom: min(calc(100vw / 1440px), 1.2); }
    html { zoom: var(--zoom); }
  }
  @media (max-width: 389.98px) {
    :root { --zoom: max(calc(100vw / 390px), 0.9); }
    html { zoom: var(--zoom); }
  }
}