/* Paper chapters: every section is one sheet of flat coloured paper laid over the last.
 * Each field owns its ink; small text on tomato is always dark ink (white fails 4.5:1 there). */
:root {
  --paper: #fafafa;
  --ink: #141414;
  --muted: #5c5c5c;

  --tomato: #ff4b2b;
  --cobalt: #2a45ff;
  --yellow: #ffc93c;
  --navy: #101a57;
  --green: #1bb070;
  --green-2: #5ccd98;
  --pink: #ff9fc6;
  --sky: #8fd4ff;
  --sky-2: #c9ebff;

  --accent: var(--cobalt);

  --font-display: 'League Spartan', 'Figtree', system-ui, sans-serif;
  --font-body: 'Figtree', system-ui, sans-serif;
  --font-code: ui-monospace, 'SF Mono', Menlo, monospace;

  /* One scale, roughly a perfect fourth: small, body, lead, title, head, display */
  --step-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --step-body: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --step-lead: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
  --step-title: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  --step-head: clamp(2.5rem, 1.4rem + 3.6vw, 5rem);
  --step-display: clamp(3rem, 8.4vw, 9rem);

  --margin: clamp(16px, 2.8vw, 40px);
  --gap: clamp(12px, 1.6vw, 24px);
  --edge: clamp(28px, 3.4vw, 52px);

  /* Paper lying on paper: a tight contact shadow and a soft cast one */
  --lift-1: 0 1px 1px rgb(0 0 0 / 0.14), 0 3px 6px rgb(0 0 0 / 0.12);
  --lift-2: 0 2px 2px rgb(0 0 0 / 0.14), 0 10px 22px rgb(0 0 0 / 0.16);
  --lift-3: 0 3px 3px rgb(0 0 0 / 0.14), 0 22px 44px rgb(0 0 0 / 0.2);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 260ms;
  --t-reveal: 800ms;

  --focus-ring: var(--ink);
}

::selection {
  background: var(--ink);
  color: var(--yellow);
}

html {
  scrollbar-color: var(--ink) var(--tomato);
  accent-color: var(--cobalt);
  caret-color: var(--cobalt);
}

body {
  background: var(--tomato);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-body);
  line-height: 1.5;
  overflow-x: clip;
}