/* Splitpot: a walnut table at night, cream ink, cheese gold for money. Every colour, font, radius and easing the site
   uses is a token here; base.css only reads them, splitpot.css restyles the signature pieces. See DESIGN.md. */
:root {
  color-scheme: dark;

  /* the walnut table, darkest to lightest */
  --bg: #17100c;
  --bg-2: #1d140f;
  --surface: #241912;
  --surface-2: #2e2118;

  /* hairlines, in the cream ink at low strength */
  --line: rgba(247, 236, 217, 0.09);
  --line-2: rgba(247, 236, 217, 0.16);
  --line-3: rgba(247, 236, 217, 0.26);

  /* cream ink */
  --ink: #f7ecd9;
  --ink-2: #d9c8ab;
  --muted: #a8937a;

  /* ONE accent: cheese gold. Money (the pot, fees, served amounts) and the one primary action. Nothing else is gold. */
  --accent: #f4b63f;
  --on-accent: #1a110b;

  /* art only: the pot's enamel, bread, place cards */
  --enamel: #c9412c;
  --bread: #e8c48a;
  --card: #f3e6cc;

  /* states only, never decoration */
  --good: #8fcf7e;
  --bad: #ff7a63;
  --warn: #ff9f6b;

  /* display shouts (h1, h2, the one big number), text talks, mono keeps the receipts */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-text: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --display-weight: 700;
  --display-tracking: -0.02em;

  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  --r-pill: 999px;
  --border: 1px solid var(--line);
  --shadow: 0 1px 0 rgba(247, 236, 217, 0.04) inset, 0 22px 50px -30px rgba(0, 0, 0, 0.85);

  /* quick out, settles exactly */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 140ms;
  --t: 280ms;

  --wrap: 1200px;
  --gut: clamp(16px, 4vw, 40px);
  --top-h: 68px;
}