/* GigScope site tokens. A printed rank sheet: white paper, graphite ink for every line people read, grey only for
   labels and meta. Gold, drop red and rise teal are the product's own colours (extension/src/ui/tokens.css) and appear
   only on rank plates and rank movement. One family, Archivo: normal width for reading, narrowest (62%) for numerals. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/fonts/Archivo-latin.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --chalk: #FFFFFF;
  --paper: #FFFFFF;
  --ink: #1E1B18;
  --muted: #6B665E;
  --line: #E2DED7;
  --tint: #F4F2EE;
  --gold: #D99A1E;
  --gold-text: #7F5708;
  --drop: #B33A27;
  --rise: #1D7A74;
  --focus: #1D7A74;

  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-small: 0.875rem;
  --t-body: 1.0625rem;
  --t-lede: 1.25rem;
  --t-h3: 1.375rem;
  --t-h2: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
  --t-h1: clamp(2.5rem, 1.4rem + 4.2vw, 4.5rem);

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --radius: 6px;
  --radius-s: 4px;
  --container: 1160px;
  --gutter: clamp(16px, 4vw, 32px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --chalk: #171512;
    --paper: #171512;
    --ink: #EDE9E2;
    --muted: #A7A096;
    --line: #34302A;
    --tint: #221F1B;
    --gold-text: #EBB24A;
    --drop: #F0907E;
    --rise: #55BDB5;
    --focus: #55BDB5;
  }
}