/* Every colour, size and space from design.md, as CSS variables.
   Screens use these, never raw colours or sizes. */

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/nunito-latin.woff2") format("woff2");
}

:root {
  /* Colours (design.md 1.3). --tangerine is decoration only, never text. */
  --tangerine: #D9701F;
  --action: #B44C0C;
  --action-pressed: #963F09;
  --tint: #FBE2CB;
  --bg: #FDF3EA;
  --surface: #FFFFFF;
  --ink: #16213A;
  --muted: #5C6478;
  --line: #7D8496;
  --divider: #EBDFD3;
  --success: #1E7A3C;
  --danger: #B3261E;
  --on-action: #FFFFFF;

  /* Font (design.md 1.5) */
  --font: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --weight-body: 400;
  --weight-bold: 700;
  --weight-heavy: 800;

  /* Type scale (design.md 1.6) */
  --text-caption: 13px;
  --text-small: 15px;
  --text-body: 17px;
  --text-button: 17px;
  --text-title: 22px;
  --text-heading: 28px;
  --text-display: 40px;
  --line-body: 1.5;
  --line-heading: 1.2;

  /* Spacing, corners, shadows (design.md 1.7) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --radius-small: 8px;
  --radius: 12px;
  --radius-large: 16px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(22, 33, 58, .08), 0 2px 8px rgba(22, 33, 58, .06);
  --shadow-sheet: 0 -4px 24px rgba(22, 33, 58, .16);
  --page-margin: 16px;
  --tap-min: 44px;
}