/* Design tokens: every colour, font and size the site uses lives here. */

/* fonts are self-hosted (latin subset, SIL OFL, licences in /fonts) so no visitor data goes to a third party */
@font-face { font-family: "DM Serif Display"; src: url("/fonts/dm-serif-display.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/fonts/space-grotesk.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
:root {
  /* ocean */
  --ink: #0b2a33;
  --paper: #f3f1ec;
  --bar: rgba(243, 241, 236, .6);
  --sea-1: #7fd1c7;
  --sea-2: #4fb3bf;
  --sea-3: #a9dfe6;
  --sea-4: #cfeee9;
  --wall:
    radial-gradient(circle at 15% 15%, #bfe9e3, transparent 45%),
    radial-gradient(circle at 85% 25%, #9fd3df, transparent 50%),
    radial-gradient(circle at 50% 100%, #2e8a99, transparent 60%),
    #dff3f1;
  --faint: color-mix(in srgb, var(--ink) 18%, transparent);
  --soft: color-mix(in srgb, var(--ink) 30%, transparent);

  /* type */
  --font-name: "DM Serif Display", Georgia, serif;
  --font-body: "Space Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* shape */
  --line: 2px solid var(--ink);
  --shadow-sm: 2px 2px 0 var(--ink);
  --shadow: 4px 4px 0 var(--ink);
  --shadow-lg: 7px 7px 0 var(--ink);
  --radius: 18px;

  /* layout */
  --bar-h: 56px;
  --video-tall: min(64vh, 600px); /* height of a portrait (phone) recording */
}