/* Hotintro tokens. GENERATED by source/build.py from tokens.json: edit tokens.json, not this file.
   White text on tomato only at 24 px+ (or 19 px+ at weight 600+): 3.36:1. Body text on tomato is ink (5.74:1). */

@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/InstrumentSans.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("fonts/Geist.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMono.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-tomato: #FF4A1C;
  --color-ink: #0E0E10;
  --color-ink-2: #1E1E22;
  --color-chalk: #F5F3EF;
  --color-white: #FFFFFF;
  --color-stone: #6C6862;
  --color-ash: #8F8C88;
  --color-mist: #E6E4E0;
  --color-line-dark: #2E2E33;
  --color-black: #000000;

  --font-display: "Instrument Sans", "Helvetica Neue", "Arial", sans-serif;
  --font-text: "Geist", -apple-system, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
  --font-display-weight: 600;
  --font-display-stretch: 85%;
  --font-display-tracking: -0.01em;
  --font-text-weight: 400;
  --font-text-strong-weight: 500;
  --font-mono-weight: 500;

  --size-body: 16px;
  --size-lead: 24px;
  --size-title: 40px;
  --size-headline: 64px;
  --size-display: 104px;

  --radius-tile: 16px;
  --radius-ticket: 24px;
  --radius-pill: 9999px;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 56px;
  --space-8: 64px;
  --space-9: 72px;
  --space-10: 80px;
  --space-margin-post: 80px;
  --space-margin-site: 72px;

  --mark-wordmark-min-height: 24px;
  --mark-heart-min: 28px;
  --mark-icon-min: 128px;

  /* roles, light */
  --ground: #F5F3EF;
  --surface: #FFFFFF;
  --text: #0E0E10;
  --text-muted: #6C6862;
  --line: #E6E4E0;
  --action: #0E0E10;
  --on-action: #FFFFFF;
  --accent: #FF4A1C;
  --on-accent: #0E0E10;
  --live: #FF4A1C;
  --gone: #8F8C88;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0E0E10;
    --surface: #1E1E22;
    --text: #F5F3EF;
    --text-muted: #8F8C88;
    --line: #2E2E33;
    --action: #F5F3EF;
    --on-action: #0E0E10;
    --accent: #FF4A1C;
    --on-accent: #0E0E10;
    --live: #FF4A1C;
    --gone: #8F8C88;
  }
}

:root[data-theme="dark"] {
  --ground: #0E0E10;
  --surface: #1E1E22;
  --text: #F5F3EF;
  --text-muted: #8F8C88;
  --line: #2E2E33;
  --action: #F5F3EF;
  --on-action: #0E0E10;
  --accent: #FF4A1C;
  --on-accent: #0E0E10;
  --live: #FF4A1C;
  --gone: #8F8C88;
}