/* The type roles, and the one typeface.
 *
 * ===========================================================================
 * THE ROLES ARE THE HANDOFF'S TABLE, ONE STATEMENT EACH
 * ===========================================================================
 *
 * The boards draw each artboard at one window size, so a `font-size` there is
 * that artboard's OUTPUT and not a value to type in. Every size below is the
 * handoff's own type table, mapped once: a role is a custom property here, and
 * the anatomy sheet applies the role to an element rather than restating a
 * number. `../view/stylesheets.test.ts` compares every row of this file against
 * that table on every run, so a size that drifts from the design is a red rather
 * than a thing somebody notices at one width.
 *
 * ONE ROW IS DELIBERATELY NOT DECLARED HERE, because the table says not to:
 * `dialog title` reads "Nocturne's `.dialog-title`, unchanged". A property for it
 * would be a second statement of a number the shipped sheet already sets, so the
 * test measures the SHIPPED rule against the table's row instead. That keeps the
 * row measured, and it turns red if a later bundle moves `.dialog-title` — which
 * is the only signal that would mean the product now has to override it.
 *
 * ===========================================================================
 * TYPE DOES NOT SCALE WITH THE WINDOW, AND THERE IS NO clamp() HERE
 * ===========================================================================
 *
 * "Type does not scale with the window. Every size below is fixed. Earlier
 * revisions promised a `clamp()` per step against `100vw`; the boards never
 * drew one, and at three widths they draw 13px bar buttons and 11px slider
 * labels alike. Prose has a comfortable size and a window 640px wider does not
 * change it. What ramps is LAYOUT — the game, the rail, the tiles — not the type
 * inside it. Delete every `clamp()` in your type layer; there are no per-width
 * type values to implement."
 *
 * So there is not one `clamp()` in this file, and its absence is asserted.
 *
 * ===========================================================================
 * THE TYPEFACE IS SELF-HOSTED, BECAUSE THE POLICY REFUSES THE DESIGN'S IMPORT
 * ===========================================================================
 *
 * `styles.css`'s second line is a Google Fonts `@import`. That line is the
 * designer's and is shipped unedited, because its provenance is a byte
 * comparison — and the served policy's `style-src 'self'` refuses the request,
 * which admits a style ATTRIBUTE and never a URL. So the face is served from
 * this tree instead, and without the rule below the product renders in
 * `system-ui`: the refusal is silent, and a fallback metric changes every box
 * on every board.
 *
 * ONE FACE, VARIABLE, WEIGHTS 400 TO 600. The handoff: "Inter, variable file,
 * weights 400 / 500 / 600 only. Headings never exceed 500; hierarchy is size
 * and space." `font-display: swap` is what the design's own import asked for.
 *
 * AND NOTHING FOR AN ICON FONT. The handoff: icons are "Phosphor, inline SVG …
 * No icon font, no text glyphs", and the view lifts the deck's own shapes, so a
 * second face would be a file nothing names. */

@font-face {
  font-family: 'Inter';
  src: url('../../fonts/InterVariable.ttf') format('truetype');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

body {
  /* The roles, in the table's order. Each is a size, a weight and the tracking
   * the table states for it; a role the table gives no tracking takes none. */
  --type-display: 64px;
  --weight-display: 500;
  --track-display: -0.02em;

  --type-headline: 34px;
  --weight-headline: 500;
  --track-headline: -0.01em;

  --type-title: 26px;
  --weight-title: 500;

  --type-large: 22px;
  --weight-large: 500;

  /* `dialog title` (20/500) is Nocturne's own and is not declared here; see the
   * header. */

  --type-body: 16px;
  --weight-body: 400;

  --type-lead: 15px;
  --weight-lead: 400;

  --type-default: 14px;
  --weight-default: 400;

  --type-small: 13px;
  --weight-small: 400;

  --type-micro: 11px;
  --weight-micro: 400;
  --track-micro: 0.12em;

  --type-tag: 10px;
  --weight-tag: 400;
  --track-tag: 0.1em;

  /* The stated exceptions, which the table lists as exceptions rather than as
   * roles: "PAUSED is 96px +.16em; the room-code field is 18px +.3em tabular,
   * inside an ordinary 36px `.input`; port-badge glyphs are 13px in the 26px and
   * 30px badges and 15px in the 34px, weight 600." */
  --type-paused: 96px;
  --track-paused: 0.16em;
  --type-roomcode: 18px;
  --track-roomcode: 0.3em;
  --type-port-glyph: 13px;
  --type-port-glyph-large: 15px;
  --weight-port-glyph: 600;

  /* And a fourth port-glyph size the exceptions list does not reach: the overlay
   * band's leader is a 56px square, not a badge, and board 17 draws its `P2` at
   * 20px weight 600. Lifted from the board rather than borrowed from the
   * `dialog title` row, which is 20px by coincidence and means something else. */
  --type-port-glyph-band: 20px;

  /* The strapline is the one uppercase run the table does not name: the join
   * board draws it at the default size with wider tracking than `micro`. */
  --track-strapline: 0.18em;
}

/* The four roles a view names as a class. The rest are applied by the anatomy
 * sheet to the element that carries them, so a nameplate's name is `large` in
 * the lobby frame and `body` in game without either sheet restating a number. */

.t-display {
  font-size: var(--type-display);
  font-weight: var(--weight-display);
  letter-spacing: var(--track-display);
  line-height: 1;
}

.t-headline {
  font-size: var(--type-headline);
  font-weight: var(--weight-headline);
  letter-spacing: var(--track-headline);
}

.t-lead {
  font-size: var(--type-lead);
  font-weight: var(--weight-lead);
  line-height: 1.5;
}

/* `micro` and `tag` are the only uppercase in the product, and the transform is
 * the rule rather than the text: a board's own text node is in sentence case and
 * what a person reads is this. */
.t-micro {
  font-size: var(--type-micro);
  font-weight: var(--weight-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--muted);
}

/* Tabular figures wherever a number changes in place, which is the table's own
 * rule: "Tabular figures wherever a number changes in place (delay, timers,
 * room code)." */
.input[data-field='roomcode'],
.st-download-tag,
.st-bar-relay,
.st-relay {
  font-variant-numeric: tabular-nums;
}