/* Design tokens. Color laws:
   red = the brand + the live order · gold = money · cream = words
   oxblood = depth · green = only the WhatsApp action */
:root {
  color-scheme: dark;

  /* wall */
  --night: #0e0b0a;
  --wall: #120e0c;
  --panel: #1b1513;
  --panel-2: #241c19;
  --rule: rgb(251 244 232 / 0.14);
  --rule-strong: rgb(251 244 232 / 0.28);

  /* paint */
  --red: #ea0b0b;
  --red-ink: #c8100e;      /* red that carries small cream text (5.4:1) */
  --neon-core: #ffd9d0;
  --oxblood: #ae2324;
  --oxblood-deep: #540c0c;
  --gold: #f2c10f;
  --amber: #e8ae0e;
  --cream: #fbf4e8;
  --cream-2: #cdbfad;
  --cream-3: #9c9183;

  /* WhatsApp action */
  --wa: #25d366;
  --wa-press: #1eb457;
  --wa-ink: #05230f;

  /* type */
  --font-neon: 'Kaushan Script', 'Brush Script MT', cursive;
  --font-paint: 'Londrina Solid', 'Arial Narrow', sans-serif;
  --font-ui: 'Barlow', 'Segoe UI', Roboto, sans-serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.375rem;
  --text-xl: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem);
  --text-2xl: clamp(2.5rem, 1.6rem + 4.4vw, 4.25rem);

  /* paint shadow: the sign painter's drop shade */
  --shade: 0.06em 0.07em 0 var(--oxblood-deep);

  /* space (4px base) */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4.5rem;
  --s9: 7rem;
  --gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);

  --radius: 6px;
  --tap: 44px;

  /* board columns: count | body | price | action (fixed so prices never move) */
  --col-count: 3rem;
  --col-price: 5.3rem;

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-paint: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-quick: 160ms;
  --dur: 320ms;
  --dur-paint: 520ms;
}