/* Design tokens: see DESIGN.md section 2. Change values there first. */
@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Variable.fd19467bc199.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-Variable.8829b0fa26b8.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --pub-shadow-soft: 0 8px 24px #102b4610;
  --pub-shadow-lift: 0 16px 36px #102b4620;
  --pub-curve-height: 64px;
  --pub-motion-distance: 12px;
  --pub-mosaic-row: 190px;

  --paper: #f6f6f4;
  --surface: #ffffff;
  --ink: #1f2328;
  --steel: #64707c;
  --steel-ink: #556270; /* steel text on mist */
  --mist: #e3e6e9;
  --signal: #e2563b; /* vermilion */
  --field-border: #848e98; /* input outlines: 3.08:1 on paper, 3.33:1 on white (WCAG 1.4.11) */

  --font-sans: "Geist", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;

  --radius: 10px;
  --radius-crest-large: 24px; /* the large crest frame on screen 24, measured from the image */
  --rule: 1px solid var(--mist);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --focus: 2px solid var(--ink);

  /* Sign-in size set: screens 24-31 only (DESIGN.md section 3). Normal scale everywhere else. */
  --signin-heading: 4.5rem; /* 72px */
  --signin-heading-weight: 700;
  --signin-heading-tracking: -0.02em;
  --signin-label: 2.125rem; /* 34px, choice-row labels */
  --signin-link: 1.5rem; /* 24px */
  --signin-icon-square: 88px;
  --signin-icon: 56px;

  /* Sign-in form pages (25-31), measured from screen 25 */
  --signin-form-heading: 3.5rem; /* 56px */
  --signin-form-text: 1.3125rem; /* 21px: field labels, links, helper text */
  --signin-input: 1.75rem; /* 28px */
  --signin-control-height: 64px; /* inputs and the primary button */
  --signin-button-label: 1.75rem; /* 28px */
  --signin-crest: 104px;
  --signin-wordmark: 3rem; /* 48px */
  --signin-help: 1.3125rem; /* 21px: helper lines under fields */
  --signin-note: 1.25rem; /* 20px: the quiet line at the foot of a form (screen 27) */
  --signin-code-digit: 2rem; /* 32px: one digit in a code box */
  --signin-code-box: 80px; /* code box height (screen 28) */
  --signin-code-gap: 16px;
}

/* Phones: the sign-in set scales down */
@media (max-width: 599px) {
  :root {
    --signin-heading: 2.5rem; /* 40px */
    --signin-label: 1.375rem; /* 22px */
    --signin-link: 1.125rem; /* 18px */
    --signin-icon-square: 56px;
    --signin-icon: 32px;
    /* measured from screen 26 (phone) */
    --signin-form-heading: 2.25rem; /* 36px */
    --signin-form-text: 1.25rem; /* 20px */
    --signin-input: 1.4375rem; /* 23px */
    --signin-control-height: 62px;
    --signin-button-label: 1.5rem; /* 24px */
    --signin-crest: 60px;
    --signin-wordmark: 1.5rem; /* 24px */
    --signin-help: 1.1875rem; /* 19px */
    --signin-note: 1.0625rem; /* 17px */
    --signin-code-digit: 1.9375rem; /* 31px */
    --signin-code-box: 62px; /* screen 26 */
    --signin-code-gap: 6px;
  }
}

/* Public website (round 23, DESIGN.md section 12): the mockups' navy, gold and cream, its serif
   headings and its size set. Learn's signed-in screens never use these. */
@font-face {
  font-family: "School Sans";
  src: url("../fonts/public/geist-text.1ef28f45dc19.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "School Mono";
  src: url("../fonts/public/geist-mono-numbers.828d3919ddbc.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "School Serif";
  src: url("../fonts/public/source-serif-4-700.ca62f95423b1.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "School Serif";
  src: url("../fonts/public/source-serif-4-600-italic.b4110cdaef77.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

:root {
  --navy: #12284c; /* headings, footer, step numbers, outline buttons: 14.1:1 on cream */
  --navy-muted: #c9d2e0; /* quiet text on navy: 9.6:1 */
  --gold: #e8a838; /* "Welcome to" and the motto on navy only: 7.0:1 */
  --gold-deep: #b87a14; /* icons on gold-wash: 3.06:1 (non-text) */
  --gold-wash: #fcebc5; /* icon circles and the stage blocks' rule */
  --cream: #fcfaf6; /* public page background */
  --cream-band: #faf5ea; /* every other section */
  --whatsapp: #25d366; /* WhatsApp's own green (documented exception); --ink label 7.97:1 */
  --on-dark: #ffffff; /* text and focus rings on navy: 14.7:1 */
  --signal-public: #e8694f; /* Apply for a place: the lighter vermilion of DESIGN.md section 2, so
                               its --ink label is 4.94:1 (the brief: 4.5:1 everywhere) */
  --focus-on-dark: 2px solid var(--on-dark);
  --focus-offset: 2px;

  --font-public-sans: "School Sans", "Geist", system-ui, sans-serif;
  --font-public-mono: "School Mono", "Geist Mono", ui-monospace, monospace;
  --font-serif: "School Serif", Georgia, "Times New Roman", serif;

  --navy-deep: #0c1c38; /* the hero's crest panel when there is no photo (white on it 16.4:1) */
  --gold-text: #8a5a0b; /* gold words on cream or white (the motto on the sign-in pages): 5.9:1 */
  --gold-hairline: rgba(232, 168, 56, 0.35); /* round 26: between rows on navy (decorative) */
  --gold-tint: #fdf4e1; /* round 26: the quest tiles; navy on it 13.2:1 */

  /* Round 24 scale (the owner's brief): generous, never squeezed. Phone values first. */
  --pub-max: 1280px; /* content width */
  --pub-gutter: 24px; /* 32px from 600px, 40px from 1024px */
  --pub-section: 56px; /* the hero's and footer's padding: 80px from 600px, 96px from 1024px */
  /* Round 26: from one section's content to the next section's heading, whatever the
     backgrounds (the owner's choice): 64px from 600px, 72px from 1024px. Each band takes half
     on each side, so a change of colour sits midway. */
  --pub-section-gap: 56px;
  --pub-gap: 16px; /* between cards: 24px from 1024px */
  --pub-target: 48px; /* buttons; every control is at least 44px */
  --pub-target-min: 44px;
  --pub-field: 48px; /* sign-in fields */
  --pub-button-tall: 52px; /* sign-in buttons */
  --pub-crest: 40px;
  --pub-footer-plate: 56px; /* the footer crest's round cream plate: 72px from 1024px */
  --pub-crest-hero: 220px; /* the large crest when there is no hero photo */
  --pub-icon-circle: 56px;
  --pub-step-number: 36px;
  --pub-stage-thumb: 120px; /* phones: the stage picture beside its words */
  --pub-stage-words: 8em; /* phones: the words' width before they wrap below the picture */
  --pub-step-words: 5em; /* a step's words beside its number, icon and chevron */
  --pub-strip-photo: 78vw; /* one photo's width in the strip: 300px from 600px */
  --pub-hero-min: 520px; /* 640px from 1024px */
  --pub-hero-share: 72vh; /* from 1024px: about three quarters of a laptop's first screen */
  /* Under 1280px the hero photo is a band across the top: from about 480px wide it grows with the
     screen (46vw), so the review hero keeps both children's faces whole (round 25). */
  --pub-hero-band: max(calc(var(--pub-hero-min) * 0.42), 46vw);
  --pub-header-height: 72px;
  --pub-hero-text: 640px; /* the hero's text column */
  --pub-hero-title: clamp(2.5rem, 5vw, 4rem);
  --pub-hero-motto: 1.75rem; /* 28px: 2.25rem from 1024px */
  --pub-section-title: 2rem; /* 32px: 2.75rem (44px) from 1024px */
  --pub-card-title: 1.25rem; /* 20px */
  --pub-name: 1.0625rem; /* 17px: the school's name in the header (1.375rem from 1024px) */
  --pub-lead: 1.1875rem; /* 19px: 1.3125rem (21px) from 1024px */
  --pub-body: 1.0625rem; /* 17px: 1.125rem (18px) from 1024px */
  --pub-small: 0.9375rem; /* 15px: the smallest text on the public site */
  --pub-line: 1.6;
  --pub-button: 1.1667rem; /* 18.67px bold: large text */
  --pub-letter-caps: 0.12em;
  --pub-title-tracking: -0.01em;
  --pub-icon: 24px;
  --pub-icon-large: 32px;
  --pub-icon-small: 18px;
  --pub-rule-thick: 4px;
  --pub-underline-offset: 3px;
  --pub-current-offset: 6px; /* the current page's underline in the menu */
  --pub-menu-width: 260px; /* the Academics menu */
  --pub-measure: 68ch; /* the longest line of running text */
  --pub-form-width: 560px; /* a sign-in form on phones and tablets (centred) */
  --pub-form-width-wide: 760px; /* beside the navy panel */
  --pub-full-height: 100vh; /* the sign-in pages fill the screen */
  /* Round 26: the Welcome band and the footer's contact area */
  --pub-welcome-text: 1.25rem; /* 20px */
  --pub-welcome-line: 1.7;
  --pub-offer-text: 1.0625rem; /* 17px, white on navy */
  --pub-card-radius: 16px;
  --pub-card-pad: 24px; /* 32px from 600px */
  --pub-icon-round: 40px;
  --pub-rule-gold: 2px; /* the footer's and the quest tiles' gold top line */
}

/* Round 29: the header's name (the footer keeps --pub-name); smaller under 480px, so it fits two
   lines beside the buttons */
:root {
  --pub-brand-name: var(--pub-name);
}
@media (max-width: 479px) {
  :root {
    --pub-brand-name: 0.875rem; /* 14px */
  }
}
@media (min-width: 600px) {
  :root {
    --pub-gutter: 32px;
    --pub-section: 80px;
    --pub-section-gap: 64px;
    --pub-card-pad: 32px;
    --pub-strip-photo: 300px;
  }
}

@media (min-width: 1024px) {
  :root {
    --pub-gutter: 40px;
    --pub-section: 96px;
    --pub-section-gap: 72px;
    --pub-gap: 24px;
    --pub-crest: 52px;
    --pub-footer-plate: 72px;
    --pub-hero-min: 640px;
    --pub-hero-motto: 2.25rem; /* 36px */
    --pub-section-title: 2.75rem; /* 44px */
    --pub-name: 1.375rem; /* 22px */
    --pub-lead: 1.3125rem; /* 21px */
    --pub-body: 1.125rem; /* 18px */
    --pub-icon-circle: 64px;
  }
}