/*
 * Design tokens. Every colour, font and spacing value in the site resolves here.
 *
 * --cw and --cg are the carousel's only geometry inputs: card width and the gap
 * between frames. js/lib/carousel-math.js emits CSS calc() expressions in terms
 * of them, so overriding them in a media query re-solves the cylinder with no
 * JavaScript involved. See css/responsive.css.
 */

:root {
  /* Surface */
  --bg: #0b0b0c;
  --bg-raise: #131315;
  --bg-veil: rgba(11, 11, 12, 0.6);

  /* Ink */
  --ink: #f2f0ec;
  --ink-80: rgba(242, 240, 236, 0.8);
  --ink-68: rgba(242, 240, 236, 0.68);
  --ink-55: rgba(242, 240, 236, 0.55);
  --ink-45: rgba(242, 240, 236, 0.45);
  --ink-32: rgba(242, 240, 236, 0.32);

  /* Rules */
  --line: rgba(242, 240, 236, 0.12);
  --line-soft: rgba(242, 240, 236, 0.09);
  --line-strong: rgba(242, 240, 236, 0.28);

  --accent: #c9f24d;
  --accent-soft: rgba(201, 242, 77, 0.08);

  --font-sans: Archivo, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --gutter: 32px;
  --maxw: 1240px;
  --radius-pill: 999px;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Carousel geometry */
  --cw: 30vw;
  --cg: 30vw;

  /* Layering: stage < panels < page content < hud < header < lightbox */
  --z-panels: 20;
  --z-main: 30;
  --z-hud: 50;
  --z-header: 60;
  --z-lightbox: 80;
}