/* Risograph. Two inks on warm paper.
   Overlaps produce a third colour through multiply rather than being chosen.
   See _research/03-narrative-and-visual.md Part B section 3. */

:root {
  /* Paper and the two inks. That is the entire palette. */
  --paper: #f2ede3;
  --paper-deep: #e7e0d2;
  --ink-a: #1f3a5f;   /* midnight blue */
  --ink-b: #f0562a;   /* fluorescent orange */

  --ink-a-70: rgba(31, 58, 95, 0.7);
  --ink-a-45: rgba(31, 58, 95, 0.45);
  --ink-a-20: rgba(31, 58, 95, 0.2);
  --ink-a-10: rgba(31, 58, 95, 0.1);
  --ink-b-20: rgba(240, 86, 42, 0.2);

  /* No webfonts. The game must work with no network at all. */
  --face-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --face-text: Georgia, "Times New Roman", serif;
  --face-mono: "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  --step--1: clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
  --step-0: clamp(0.9rem, 0.86rem + 0.18vw, 1rem);
  --step-1: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem);
  --step-2: clamp(1.35rem, 1.2rem + 0.6vw, 1.75rem);
  --step-3: clamp(1.9rem, 1.5rem + 1.6vw, 3rem);

  --space-1: 0.35rem;
  --space-2: 0.7rem;
  --space-3: 1.1rem;
  --space-4: 1.8rem;

  --rule: 1.5px solid var(--ink-a);
  --rule-soft: 1px solid var(--ink-a-20);

  --duration: 160ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-a);
  font-family: var(--face-text);
  font-size: var(--step-0);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Print grain, generated rather than shipped as an image asset. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.42;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

:focus-visible {
  outline: 2.5px solid var(--ink-b);
  outline-offset: 2px;
}