/* Spyglass design tokens. Every colour, size and timing on the site comes from here.
   Rules live in brand/BRAND.md: white paper, black ink, square corners, and one green
   taken from the buy bar every post starts with. Dark mode swaps paper and ink. Paper and
   ink are soft greys rather than pure white and black, to keep contrast comfortable. */

@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url(/fonts/schibsted-latin.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url(/fonts/schibsted-latin-ext.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light dark;

  /* Paper and ink */
  --paper: #f1f1ee;
  --ink: #232321;
  --ink-2: #565652;
  --ink-3: #6a6a64;
  --fill: #e3e3de;
  /* Lines sit between paper and ink, so structure reads without shouting. */
  --line: #a3a39d;
  --line-soft: #d0d0ca;

  /* The one colour: the buy bar's green. Fills only, never text on white. */
  --buy: #2bd46a;
  --buy-ink: #10140f;

  /* Status (live board only) */
  --warn: #ff9f0a;

  /* Product frames: Telegram's own dark theme, used only inside chat mockups */
  --tg-bg: #0e1621;
  --tg-head: #17212b;
  --tg-bubble: #182533;
  --tg-link: #6ab3f3;
  --tg-kb: rgba(255, 255, 255, 0.07);

  /* Rules: structure is drawn with lines; controls keep a full-ink edge */
  --rule: 2px solid var(--line);
  --rule-thin: 1px solid var(--line-soft);
  --edge: 2px solid var(--ink);

  /* Type: one family. Weight and size do the work. */
  --font: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-sm: 0.875rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-h3: 1.375rem;
  --text-h2: clamp(2.5rem, 6.4vw, 5.5rem);
  --text-hero: clamp(3.5rem, 12.5vw, 11.5rem);

  /* Space: 4px base */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --section: clamp(64px, 9vw, 128px);
  --gutter: clamp(20px, 3vw, 40px);

  /* Motion */
  --t-fast: 120ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dark mode follows the system setting: dark paper, light ink and rules, the same green. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1a1a19;
    --ink: #e4e4df;
    --ink-2: #a9a9a3;
    --ink-3: #85857f;
    --fill: #2a2a28;
    --line: #5a5a56;
    --line-soft: #363634;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
  }
}