/* squarz: a sheet of graph paper on a gallery wall, one cobalt ink. Every colour, font, radius and easing the site
   uses is a token here (DESIGN.md has the jobs and the budget). */
:root {
  color-scheme: light;

  /* paper and the white of the sheet */
  --bg: #F5F3EE;
  --bg-2: #EFECE6;
  --surface: #FFFFFF;
  --surface-2: #ECE9E2;

  /* hairlines in ink */
  --line: rgba(22, 22, 21, 0.09);
  --line-2: rgba(22, 22, 21, 0.15);
  --line-3: rgba(22, 22, 21, 0.26);

  /* ink */
  --ink: #161615;
  --ink-2: #3F3E3A;
  --muted: #6B6963;

  /* ONE accent, ONE meaning: yours, and the burn. The main action, the selection, your squares, the burn figure. */
  --cobalt: #2B3FE0;
  --cobalt-soft: rgba(43, 63, 224, 0.1);
  --accent: var(--cobalt);
  --on-accent: #FFFFFF;

  /* states only */
  --good: #1E7F4F;
  --bad: #C8382A;
  --warn: #9A6210;

  --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-text: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  --r-sm: 6px;
  --r: 10px;
  --r-lg: 14px;
  --r-pill: 999px;
  --border: 1px solid var(--line);
  /* the only shadow: paper lying on a table */
  --paper-shadow: 0 1px 0 rgba(22, 22, 21, 0.04), 0 18px 40px -24px rgba(22, 22, 21, 0.28);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 140ms;
  --t: 260ms;

  --wrap: 1280px;
  --gut: clamp(16px, 3.4vw, 40px);
  --top-h: 64px;
}