/* Design tokens. Every module uses these; nobody hard-codes the palette. */
:root {
  --field: #8b63f5;        /* surface water, the brand violet */
  --deep: #5d3fc9;         /* the brainless crowd, mid water */
  --abyss: #1d1146;        /* the bottom of the page */
  --ink: #0b0b0b;          /* Turri, every drawn line */
  --cream: #fdf1d8;        /* eyes, glints, wet paint, text on deep water */
  --fg: var(--ink);        /* current text colour; the depth module flips it to cream as we sink */
  --bg: var(--field);      /* current water colour; the depth module mixes field to abyss */

  --serif: "Fraunces", "Newsreader", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-jelly: cubic-bezier(.34, 1.56, .64, 1);   /* a soft overshoot, like a bell refilling */
  --ease-sink: cubic-bezier(.5, 0, .75, 0);

  --gutter: clamp(16px, 4vw, 56px);
  --maxw: 1320px;
  --radius: 999px;

  --z-water: 0;
  --z-crowd: 1;
  --z-main: 2;
  --z-depth: 5;
  --z-top: 10;
  --z-swap: 40;
  --z-cursor: 90;
  --z-loader: 100;
}