/* Sven Jungmann — design tokens. v2. Build phase uses open-source font substitutes. */

:root {
  color-scheme: light;

  /* Surfaces */
  --paper:    #F6F5F2;  /* page background, warm off-white */
  --ink:      #0B0E12;  /* primary text and rules, graphite */

  /* Ink at opacity — use these, not separate greys */
  --ink-90:   rgba(11, 14, 18, 0.92);
  --ink-80:   rgba(11, 14, 18, 0.80);
  --ink-60:   rgba(11, 14, 18, 0.60);
  --ink-40:   rgba(11, 14, 18, 0.40);
  --ink-20:   rgba(11, 14, 18, 0.20);
  --ink-10:   rgba(11, 14, 18, 0.10);
  --ink-05:   rgba(11, 14, 18, 0.05);

  /* Signal — reserved for spec-marking work only. Keep total inked area <2% of any page. */
  --signal:   #E94E1B;

  /* Illustration register only — appears inside essay illustrations, never in UI chrome. */
  --buttery:  #E2B856;

  /* Typography. Production: Berkeley Mono + Tiempos Text. Build: JetBrains Mono + Source Serif 4. */
  --mono:     'JetBrains Mono', 'Berkeley Mono', ui-monospace, monospace;
  --body:     'Source Serif 4', 'Tiempos Text', Georgia, 'Times New Roman', serif;

  /* Spacing — 8px baseline, no values outside these increments */
  --space-1:  8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  48px;
  --space-6:  64px;
  --space-7:  96px;
  --space-8:  128px;

  /* Page */
  --page-max: 1120px;
  --read-max: 720px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.6;
  font-feature-settings: 'kern', 'liga';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { overflow-x: hidden; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

html { scroll-behavior: smooth; }

::selection { background: var(--signal); color: var(--paper); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 1px;
}

img { max-width: 100%; display: block; }