/* Republika tokens: plain CSS variables, usable from any stack (served from janwirth/republika). */
/* Fluid type and space from Utopia (utopia.fyi): 320px to 1240px viewport,
   17px base at ratio 1.2 up to 20px base at ratio 1.25. */
:root {
  color-scheme: light dark;

  /* Colour: gray plus red, green, accent. Nothing else. */
  --bg: light-dark(oklch(1 0 0), oklch(0.16 0 0));
  --fg: light-dark(oklch(0.16 0 0), oklch(0.97 0 0));
  --muted: light-dark(oklch(0.5 0 0), oklch(0.7 0 0));
  --faint: light-dark(oklch(0.72 0 0), oklch(0.45 0 0));
  --line: light-dark(oklch(0.94 0 0), oklch(0.24 0 0));
  --overlay: light-dark(oklch(0.97 0 0), oklch(0.22 0 0));
  --red: light-dark(oklch(0.58 0.21 27), oklch(0.68 0.19 27));
  --green: light-dark(oklch(0.6 0.17 150), oklch(0.72 0.17 150));
  /* The accent: apps pick a level (AA or AAA) and a hue. accent.js solves lightness and
     chroma inside that level on --bg in each mode and overrides this; the fallback is AAA, hue 260. */
  --accent-h: 260;
  --accent: light-dark(oklch(0.4727 0.1892 260), oklch(0.6932 0.1581 260));
  /* Text on an accent fill: the same ratio as the accent against the page. */
  --on-accent: var(--bg);

  --step--2: clamp(0.7378rem, 0.7162rem + 0.1081vw, 0.8rem);
  --step--1: clamp(0.8854rem, 0.8456rem + 0.1993vw, 1rem);
  --step-0: clamp(1.0625rem, 0.9973rem + 0.3261vw, 1.25rem);
  --step-1: clamp(1.275rem, 1.175rem + 0.5vw, 1.5625rem);
  --step-2: clamp(1.53rem, 1.3828rem + 0.7359vw, 1.9531rem);
  --step-3: clamp(1.836rem, 1.6254rem + 1.0529vw, 2.4414rem);
  --step-4: clamp(2.2032rem, 1.908rem + 1.4758vw, 3.0518rem);
  --step-5: clamp(2.6438rem, 2.2366rem + 2.0363vw, 3.8147rem);

  --space-3xs: clamp(0.2656rem, 0.2493rem + 0.0815vw, 0.3125rem);
  --space-2xs: clamp(0.5312rem, 0.4986rem + 0.163vw, 0.625rem);
  --space-xs: clamp(0.7969rem, 0.748rem + 0.2446vw, 0.9375rem);
  --space-s: clamp(1.0625rem, 0.9973rem + 0.3261vw, 1.25rem);
  --space-m: clamp(1.5938rem, 1.4959rem + 0.4891vw, 1.875rem);
  --space-l: clamp(2.125rem, 1.9946rem + 0.6522vw, 2.5rem);
  --space-xl: clamp(3.1875rem, 2.9918rem + 0.9783vw, 3.75rem);
  --space-2xl: clamp(4.25rem, 3.9891rem + 1.3043vw, 5rem);
  --space-3xl: clamp(6.375rem, 5.9837rem + 1.9565vw, 7.5rem);

  --radius: 1.25rem;
  --font: Inter, "SF Pro Text", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 var(--step-0) / 1.45 var(--font);
  -webkit-font-smoothing: antialiased;
}

/* Inline code: a slight gray pill, mono at 0.85em so it sits level with the text around it.
   Blocks (pre > code) keep their own box. */
code { font-family: var(--font-mono); }
:not(pre) > code {
  font-size: 0.85em;
  padding: 0.05em 0.3em;
  border-radius: 0.3em;
  background: color-mix(in oklch, var(--line) 70%, transparent);
  overflow-wrap: anywhere;
}