:root {
  color-scheme: light;

  --font: "Instrument Sans", "Segoe UI", sans-serif;

  --bg-app: #f3efe6;
  --bg-surface: #faf7f1;
  --bg-elevated: #fffcf7;
  --bg-inset: #ece6db;

  --text-primary: #172126;
  --text-secondary: #5b686f;
  --text-muted: #8a938c;

  --border-subtle: #e2dacb;
  --border-strong: #cfc5b3;

  --accent: #1f7a76;
  --accent-strong: #176863;
  --accent-soft: rgba(31, 122, 118, 0.12);
  --accent-glow: rgba(31, 122, 118, 0.18);
  --accent-warm: #b08a5b;
  --accent-warm-soft: rgba(176, 138, 91, 0.16);

  --success: #2f7a52;
  --success-soft: rgba(47, 122, 82, 0.12);
  --attention: #c4842a;
  --attention-soft: rgba(196, 132, 42, 0.14);
  --issue: #b4453c;
  --issue-soft: rgba(180, 69, 60, 0.12);
  --danger: #d4a29c;
  --danger-text: #fffaf7;
  --complete: #2a3338;
  --complete-soft: rgba(42, 51, 56, 0.08);

  --shadow-overlay: 0 18px 50px rgba(23, 33, 38, 0.16);
  --shadow-float: 0 8px 28px rgba(23, 33, 38, 0.1);
  --shadow-bar: 0 -8px 28px rgba(23, 33, 38, 0.06);

  --radius-s: 7px;
  --radius-m: 11px;
  --radius-l: 15px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --sidebar-w: 248px;
  --bottom-nav-h: 72px;
  --quick-add-h: 72px;
  --content-w: 760px;
  --header-h: 64px;

  --stroke: 1.5px;
  --focus: 0 0 0 3px var(--accent-glow);
}

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

  --bg-app: #0b1118;
  --bg-surface: #121a23;
  --bg-elevated: #18222d;
  --bg-inset: #0e151c;

  --text-primary: #e8eef2;
  --text-secondary: #8b9aa6;
  --text-muted: #62717c;

  --border-subtle: #243140;
  --border-strong: #314456;

  --accent: #3cc4bb;
  --accent-strong: #7ee0d8;
  --accent-soft: rgba(60, 196, 187, 0.14);
  --accent-glow: rgba(60, 196, 187, 0.28);
  --accent-warm: #c4a06a;
  --accent-warm-soft: rgba(196, 160, 106, 0.16);

  --success: #5dcc8a;
  --success-soft: rgba(93, 204, 138, 0.14);
  --attention: #e0a24a;
  --attention-soft: rgba(224, 162, 74, 0.16);
  --issue: #e06a62;
  --issue-soft: rgba(224, 106, 98, 0.16);
  --danger: #c98984;
  --danger-text: #fffaf7;
  --complete: #d5dee4;
  --complete-soft: rgba(213, 222, 228, 0.08);

  --shadow-overlay: 0 22px 60px rgba(0, 0, 0, 0.45);
  --shadow-float: 0 10px 32px rgba(0, 0, 0, 0.32);
  --shadow-bar: 0 -10px 32px rgba(0, 0, 0, 0.28);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion: 0ms;
  }
}