/* Shared design tokens — the film (film/engine.mjs PAL) uses the same hex values. */
@import url('../fonts/fonts.css');

:root {
  --paper: #F4F1EA;
  --paper-2: #ECE7DC;
  --card: #FFFDF8;
  --ink: #121318;
  --ink-2: #4A4B52;
  --ink-3: #66655F; /* 4.5:1+ on paper, paper-2, card and the pastel tints (small mono labels) */
  --night: #0B0D14;
  --cobalt: #2340FF;
  --cobalt-ink: #1A2FC2;
  --thread: #E5352B;
  --chii: #F6A9BE;
  --chii-tint: #FCE3EA;
  --hachi: #5E77B0;
  --hachi-tint: #DFE6F4;
  --usagi: #F4CF5D;
  --usagi-tint: #FFF1C4;
  --mint: #7FD8B8;
  --mint-ink: #1F7A5A;
  --stone: #B8B5AC;
  --line: rgba(18, 19, 24, .12);

  --display: 'Roboto Flex', 'Helvetica Neue', Arial, sans-serif;
  --human: 'Fraunces', Georgia, serif;
  --mono: 'Martian Mono', 'SF Mono', Menlo, monospace;

  --r-card: 22px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(18, 19, 24, .06), 0 8px 24px -12px rgba(18, 19, 24, .18);
  --shadow-2: 0 2px 6px rgba(18, 19, 24, .08), 0 24px 60px -24px rgba(18, 19, 24, .28);

  --ease-swift: cubic-bezier(.2, 0, 0, 1);
  --ease-snap: cubic-bezier(.7, 0, .1, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);

  --gutter: clamp(16px, 4vw, 56px);
  --maxw: 1280px;
}