/* Design tokens — Bocavaldivia Academy (Figma: n0Z4hUtNlKsIxnbtyBMI3W) */
:root {
  /* Colors — exact values from CLAUDE.md / Figma variables. Do not add new colors. */
  --dark: #181818;
  --gold: #B08543;
  --white: #FFFFFF;
  --fog-white: #B8B8B8;

  /* Exception approved by the client for the masterclass card redesign
     (2026-07): the only non-palette color in the system, an off-white
     card surface — not pure white. */
  --card-surface: #FCFBF7;

  /* Font families — self-hosted, see @font-face rules in base.css.
     --font-gotham names the design system's sans-serif text-style role
     (Figma "Gotham" styles); Montserrat is the approved typeface filling
     that role. --font-didot is GFS Didot, a free match for Didot. */
  --font-gotham: 'Montserrat', Helvetica, Arial, sans-serif;
  --font-didot: 'Didot', Georgia, 'Times New Roman', serif;

  /* Text styles — from Figma design context, do not approximate by hand */
  --text-display-hero-size: 48px;
  --text-display-hero-line: 56px;
  --text-display-hero-weight: 700; /* Didot Bold */

  --text-heading-h2-size: 32px;
  --text-heading-h2-line: 40px;
  --text-heading-h2-weight: 400; /* Didot Regular */

  --text-heading-h4-size: 20px;
  --text-heading-h4-line: 28px;
  --text-heading-h4-weight: 400; /* Didot Regular */

  --text-heading-h3-size: 24px;
  --text-heading-h3-line: 32px;
  --text-heading-h3-weight: 350; /* Gotham Medium */

  --text-body-large-size: 18px;
  --text-body-large-line: 1.5;
  --text-body-large-tracking: 0.4px;
  --text-body-large-weight: 300; /* Gotham Light */

  --text-body-base-size: 16px;
  --text-body-base-line: 24px;
  --text-body-base-weight: 300; /* Gotham Light */

  --text-label-medium-size: 14px;
  --text-label-medium-line: 20px;
  --text-label-medium-weight: 350; /* Gotham Medium */

  --text-label-light-size: 14px;
  --text-label-light-line: 20px;
  --text-label-light-weight: 300; /* Gotham Light */

  --text-caption-small-size: 12px;
  --text-caption-small-line: 16px;
  --text-caption-small-weight: 300; /* Gotham Light */

  /* Header is fixed (see header.css); this is its rendered height (20px
     padding-block + 35px logo + border) — constant across all breakpoints
     since header__inner's padding never changes in the media query. Pages
     use it as margin-top on their first section so fixed positioning
     doesn't hide content underneath. */
  --header-height: 76px;

  /* Layout — content caps at 1360px (1440 frame minus 40px gutters), centered.
     Corner-pinned full-bleed images (hero, split-section photos, CTA background)
     are allowed to exceed this cap and reach the viewport edge. */
  --page-max-width: 1440px;
  --page-gutter: 40px;
  --frame-inset: max(40px, calc((100vw - 1440px) / 2 + 40px));
}