/* Design tokens. Every colour, font and rhythm value the site uses is declared
   here once; nothing below this file should hardcode a hex or a font stack. */

:root {
  /* Brand */
  --accent: #ff1f1f;
  --accent-soft: rgba(255, 31, 31, 0.08);
  --accent-line: rgba(255, 31, 31, 0.45);
  --accent-glow: rgba(255, 31, 31, 0.35);
  --teal: #2f9d94;
  --teal-line: rgba(47, 157, 148, 0.35);

  /* Surfaces */
  --bg: #08090b;
  --bg-cell: #0a0b0d;
  --panel: rgba(255, 255, 255, 0.035);
  --panel-solid: rgba(255, 255, 255, 0.02);
  --line: rgba(255, 255, 255, 0.09);
  --line-faint: rgba(255, 255, 255, 0.05);

  /* Text */
  --fg: #fff;
  --dim: rgba(255, 255, 255, 0.52);
  /* Was rgba(...,.32) in the generated markup — unreadable at the 9-10px sizes
     it was used for, so the footer/legal tier sits here instead. */
  --faint: rgba(255, 255, 255, 0.46);

  /* Type */
  --font-display: "Chakra Petch", sans-serif;
  --font-body: "Space Grotesk", Helvetica, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Rhythm */
  --shell: 1560px;
  --gutter: clamp(20px, 4vw, 40px);
  --section-y: clamp(64px, 8vw, 110px);

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}