/* Bulletin type system, ported from the app. One system across the product and
   the site, so nothing on the web reads as a different company.
   Source of truth: ~/dev/bulletin-app/src/theme/tokens.ts
   Brief: WEB-LANDING-BRIEF-2026-07-29.md section 7.2

   BANNED: Schoolbell, Barlow, Inter. Chrome is the system font. Clay language
   titles are Fredoka SemiBold. Cover type comes from the ten cover faces with
   their sizeMul and spacing corrections. Anything else needs Ashton to name it.

   The app's look comes from WEIGHT and TRACKING, not from a family. There is a
   note in tokens.ts saying exactly that. So this file is mostly numbers. */

/* Fredoka carries its weight in the file (static SemiBold instance). Declaring
   it at 400 is deliberate: asking for 600 makes the browser synthesise a
   bolder face on top of an already-semibold file, the same trap the app hit on
   iOS. See onboarding.tsx:877. */
@font-face {
  font-family: "Fredoka";
  src: url("/assets/fonts/Fredoka-SemiBold.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* SF Pro on Apple, which is what `font.family = 'System'` resolves to in the
     app. The rest of the stack is only for non-Apple visitors. */
  --font-sys: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-clay: "Fredoka", var(--font-sys);

  /* displayType() tracks proportionally to size, so it is an em, not a px.
     tokens.ts: DISPLAY_TRACKING_EM = -0.047 */
  --track-display: -0.047em;
}

/* ── Role classes. tokens.ts `font`, the six-role table in brief 7.2. ──
   Tracking values are points in RN, which map 1:1 to px here. */
.t-display { font-family: var(--font-sys); font-weight: 400; letter-spacing: -1.5px; }
.t-hero    { font-family: var(--font-sys); font-weight: 500; letter-spacing: -1px; }
.t-title   { font-family: var(--font-sys); font-weight: 600; letter-spacing: -0.5px; }
.t-body    { font-family: var(--font-sys); font-weight: 400; letter-spacing: 0; }
.t-label   { font-family: var(--font-sys); font-weight: 600; letter-spacing: 0.4px; }
.t-tiny    { font-family: var(--font-sys); font-weight: 600; letter-spacing: 1.6px; }

/* ── The display voice. tokens.ts displayType(): 300 weight, uppercase, tracking
   proportional to size, line-height equal to size. This thin tight uppercase
   treatment is the app's signature headline and it does not appear anywhere
   else, so it stays exact. Set the size on the element; the tracking follows. */
.t-displayType {
  font-family: var(--font-sys);
  font-weight: 300;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  line-height: 1;
}

/* ── Clay language titles. Two load-bearing settings tuned 2026-07-27:
   weight normal (the file is already SemiBold) and -0.5px tracking rather than
   the system scale's -1.6, because Fredoka's rounded forms carry their own
   width. Do not "fix" either one. */
.t-clay {
  font-family: var(--font-clay);
  font-weight: 400;
  letter-spacing: -0.5px;
}

/* ── Type scale. tokens.ts `type`, one role per text job. Sizes are px, the
   half-points are intentional and come straight from the app. */
.s-heading      { font-size: 26px;   font-weight: 700; letter-spacing: -0.6px; }
.s-title        { font-size: 19px;   font-weight: 700; letter-spacing: -0.2px; }
.s-sectionLabel { font-size: 13px;   font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; }
.s-rowTitle     { font-size: 16px;   font-weight: 600; }
.s-body         { font-size: 15.5px; font-weight: 400; line-height: 21px; }
.s-caption      { font-size: 13px;   font-weight: 400; line-height: 18px; }
.s-micro        { font-size: 11.5px; font-weight: 600; letter-spacing: 0.4px; }
.s-button       { font-size: 15.5px; font-weight: 600; }
.s-buttonSmall  { font-size: 13.5px; font-weight: 600; }
.s-buttonLarge  { font-size: 17px;   font-weight: 700; }