/* Hallmark · tokens for the paper-collage portfolio. Every colour, face, and
 * timing in styles.css points at a name in this file. */
:root {
  /* Colour. One accent: grease-pencil red. Cyan appears only as lens fringe
   * and as the rule colour on graph paper. */
  --color-table: oklch(75% 0.026 72);
  --color-paper: oklch(97.5% 0.012 92);
  --color-paper-warm: oklch(93% 0.034 88);
  --color-paper-shade: oklch(88% 0.02 85);
  --color-ink: oklch(21% 0.012 60);
  --color-ink-soft: oklch(40% 0.016 60);
  --color-black-paper: oklch(23% 0.006 60);
  --color-on-black: oklch(94% 0.014 90);
  --color-on-black-soft: oklch(76% 0.016 88);
  --color-accent: oklch(57% 0.2 29);
  --color-accent-ink: oklch(98% 0.012 90);
  --color-fringe-warm: oklch(64% 0.24 22 / 0.55);
  --color-fringe-cool: oklch(80% 0.13 205 / 0.6);
  --color-grid-rule: oklch(60% 0.075 195 / 0.3);
  --color-card-rule: oklch(62% 0.07 240 / 0.34);
  --color-focus: oklch(50% 0.17 255);
  --color-focus-on-black: oklch(84% 0.12 205);
  --color-scrim: oklch(16% 0.008 60 / 0.93);
  --color-vignette: oklch(18% 0.02 60 / 0.3);
  --shadow-contact: oklch(20% 0.03 60 / 0.42);
  --shadow-cast: oklch(20% 0.03 60 / 0.2);
  --shadow-lifted: oklch(20% 0.03 60 / 0.26);

  /* Type. One serif across its optical sizes, one mono for labels and data. */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --text-xs: 0.6875rem;
  --text-sm: 0.8125rem;
  --text-base: 1.0625rem;
  --text-md: 1.3125rem;
  --text-lg: clamp(1.6rem, 1.2vw + 1.3rem, 2.1rem);
  --text-xl: clamp(2rem, 2.6vw + 1.2rem, 3.1rem);
  --text-display-s: clamp(2.1rem, 3vw + 1rem, 3.6rem);

  /* Space, 4pt scale. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 144px;
  --gutter: clamp(16px, 4vw, 48px);
  --measure: 34rem;

  /* Motion. Everything moves on a 12 frames per second grid, so CSS
   * transitions use steps() sized to whole frames. */
  --frame: 83.33ms;
  --dur-2f: calc(var(--frame) * 2);
  --dur-3f: calc(var(--frame) * 3);
  --dur-5f: calc(var(--frame) * 5);
  --ease-2f: steps(2, end);
  --ease-3f: steps(3, end);
  --ease-5f: steps(5, end);

  /* Lens. Fringe width for the red and cyan split on display type, and how
   * strongly the dust and hairs show over the page (0 hides them). */
  --ca: 1.1px;
  --lens-dust: 0.2;

  --print-w: min(62vw, 250px);
  --radius-cut: 1.5px;
}