/* BGCut design tokens — single source of truth.
   Values must stay in sync with the inline :root block in index.html
   (the homepage keeps an inline copy to avoid a render-blocking request
   for the editor). Typography: body 16-17px/1.7, headings tight-wrapped. */
:root {
  color-scheme: light;
  --bg: #faf9f5;
  --bg-soft: #f5f3ec;
  --panel: #ffffff;
  --card: #ffffff;
  --surface: #f5f3ec;
  --surface-strong: #efece2;
  --text: #1f1e1d;
  --text-secondary: #4a4845;
  --muted: #6b6862;
  --line: #e8e4d9;
  --line-strong: #d8d3c4;
  --accent: #d97757;
  --accent-2: #e08a6d;
  --accent-3: #c15f3c;
  --accent-rgb: 217, 119, 87;
  --accent-ink: #ffffff;
  --checker-bg: #eceadf;
  --checker-sq: #dcd7c8;
  --shadow-card: 0 18px 50px rgba(60, 50, 30, 0.08);
  --shadow-soft: 0 8px 24px rgba(60, 50, 30, 0.06);
  --shadow-hover: 0 26px 60px rgba(60, 50, 30, 0.14);
  --nav-bg: rgba(250, 249, 245, 0.82);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --nav-h: 64px;
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 18px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1a1918;
  --bg-soft: #222120;
  --panel: #2b2926;
  --card: #2b2926;
  --surface: #222120;
  --surface-strong: #302e2a;
  --text: #f3f0e9;
  --text-secondary: #c5c0b8;
  --muted: #a8a399;
  --line: #3a3733;
  --line-strong: #4a463f;
  --accent: #e08a6d;
  --accent-2: #e79c82;
  --accent-3: #d97757;
  --accent-rgb: 224, 138, 109;
  --accent-ink: #1a1918;
  --checker-bg: #201f1c;
  --checker-sq: #2c2a26;
  --shadow-card: 0 18px 50px rgba(0, 0, 0, 0.35);
  --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.25);
  --shadow-hover: 0 26px 60px rgba(0, 0, 0, 0.45);
  --nav-bg: rgba(26, 25, 24, 0.82);
}