/*
 * Design tokens — the single source of truth for colours, type and shape.
 * Rules for using them live in docs/design-guide.md.
 * Light values come from chog.xyz/swap in light mode, dark values from its dark mode.
 */

:root {
  color-scheme: light;

  --page: #d8d6c7;
  --card: #eeecdf;
  --well: #dddbcd;
  --chip: #d0cebc;
  --chip-bg: rgb(166 164 154 / 0.25);
  --chip-text: #0f1a26;

  --accent: #ce437c;
  --accent-strong: #d83e7e;
  --accent-lip: #a93463;
  --accent-tint: rgb(216 62 126 / 0.1);
  --on-accent: #ffffff;
  --on-square: #eeecdf;

  --text: #0f1a26;
  --text-2: rgb(0 0 0 / 0.6);
  --text-3: rgb(0 0 0 / 0.4);

  --ok: #3fa76a;
  --neutral: #a6a49a;
  --line: #d0cebc;
  --hairline: rgb(0 0 0 / 0.08);
  --shadow: #b3b1a4;
  --doodle: #cac8b7;

  --soft-hover: #d6d4c3;
  --soft-lip: #a6a49a;

  --radius-card: 24px;
  --radius-tile: 16px;
  --radius-well: 12px;
  --radius-button: 9px;
  --radius-square: 6px;

  --shadow-card: 0 4px 6px -1px var(--shadow), 0 2px 4px -2px var(--shadow);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --page: #0f1a26;
  --card: #1c3248;
  --well: #18293b;
  --chip: #121b32;
  --chip-bg: #121b32;
  --chip-text: #d8d6c7;

  --accent-lip: #8e2b53;
  --accent-tint: rgb(206 67 124 / 0.14);
  --on-square: #ffffff;

  --text: #ffffff;
  --text-2: rgb(255 255 255 / 0.6);
  --text-3: rgb(255 255 255 / 0.4);

  --ok: #4cc38a;
  --neutral: #5e6e82;
  --line: rgb(255 255 255 / 0.16);
  --hairline: rgb(255 255 255 / 0.1);
  --shadow: #0a121c;
  --doodle: #17283b;

  --soft-hover: #17233f;
  --soft-lip: #0a1120;
}