:root {
  color-scheme: light;
  --bg: #fff8ef;
  --surface: #fffdfc;
  --surface-muted: #fbf4ea;
  --ink: #2b2118;
  --muted: #8a7866;
  --line: #eedfcc;
  --accent: #8a6844;
  --accent-strong: #3d2d1f;
  --warning: #b45309;
  --danger: #b42318;
  --soft: #fffaf4;
  --shadow: 0 18px 44px rgba(120, 80, 40, 0.08);
  --shadow-soft: 0 10px 28px rgba(120, 80, 40, 0.06);

  --warm-page-bg: #fff8ef;
  --warm-content-bg: #fffcf8;
  --warm-sidebar-bg-start: #fff7ec;
  --warm-sidebar-bg-end: #fff4e6;
  --warm-surface: #fffdfc;
  --warm-surface-soft: #fffaf4;
  --warm-surface-hover: #fff9f1;
  --warm-soft-button-bg: #fbf4ea;
  --warm-soft-button-hover: #f7ebdd;
  --warm-border: #eedfcc;
  --warm-border-strong: #e7d4bb;
  --warm-border-soft: #f2e7d9;
  --warm-text: #2b2118;
  --warm-text-soft: #4a3a2a;
  --warm-muted: #8a7866;
  --warm-muted-strong: #6e6154;
  --warm-kicker: #927d67;
  --warm-action: #8a6844;
  --warm-action-strong: #3d2d1f;
  --warm-shadow: 0 8px 24px rgba(120, 80, 40, 0.06);
  --warm-shadow-soft: 0 6px 18px rgba(120, 80, 40, 0.04);
  --warm-scene-shadow: 0 4px 10px rgba(120, 80, 40, 0.08);
  --warm-quick-hover-shadow: 0 12px 28px rgba(120, 80, 40, 0.08);
  --warm-highlight: #f3dfc2;
  --warm-highlight-line: #ecd2b2;
  --warm-sun: #f3c15d;
  --warm-cloud: #fff5e8;
  --warm-cloud-line: rgba(201, 138, 58, 0.14);
  --warm-scene-bg-start: #fffdf9;
  --warm-scene-bg-end: #fff8f0;
  --warm-scene-ground: rgba(240, 226, 208, 0.7);
  --warm-scene-basket-start: #e0c092;
  --warm-scene-basket-end: #c79155;
  --warm-scene-leaf-green: #91a870;
  --warm-scene-cloth-pink: #f0d9cf;
  --warm-scene-cloth-cream: #efe9dc;
  --warm-scene-cloth-soft: #f5efe6;
  --warm-scene-bear-start: #e8c7a0;
  --warm-scene-bear-end: #d9b284;
  --warm-scene-bear-ear: #e1bc90;
  --warm-scene-bear-face: rgba(255, 248, 239, 0.7);
  --warm-scene-rainbow-outer: #dfb37a;
  --warm-scene-rainbow-mid: #f2d8b6;
  --warm-scene-rainbow-inner: #fff8ef;
  --warm-scene-car: #d4a36a;
  --warm-scene-wheel: #9b6e46;
  --warm-scene-pot: #f0dcc0;
  --warm-scene-plant-green: #8aa16c;
  --warm-orange: #d96b3a;
  --warm-orange-bg: #fff0e6;
  --warm-orange-soft: rgba(217, 107, 58, 0.14);
  --warm-orange-label: #c86b43;
  --warm-blue: #3b74c4;
  --warm-blue-bg: #edf3ff;
  --warm-blue-soft: rgba(59, 116, 196, 0.14);
  --warm-blue-label: #4a7ace;
  --warm-green: #7a9b59;
  --warm-green-bg: #edf6e6;
  --warm-green-soft: rgba(122, 155, 89, 0.14);
  --warm-green-label: #6d9351;
  --warm-gold: #c98a3a;
  --warm-gold-bg: rgba(201, 138, 58, 0.14);
  --warm-purple: #7d6bc8;
  --warm-purple-bg: #f1edff;
  --warm-completed: #75806f;
  --warm-completed-bg: #eef2ec;
  --warm-label-text: #5f5041;
  --warm-dot: #ae9377;
  --warm-arrow: #c0a68b;
  --warm-quick-stack-start: #f1d9b7;
  --warm-quick-stack-end: #d7ab79;
  --warm-quick-bottle-start: #fff8f0;
  --warm-quick-bottle-end: #edd6b9;
  --warm-quick-pot: #ecd7b6;
  --brand: #c98a3a;
  --green-dark: #6d9351;

  /* Semantic product tokens. Keep component rules independent from raw colors. */
  --color-canvas: var(--warm-page-bg);
  --color-surface: var(--warm-surface);
  --color-surface-subtle: var(--warm-surface-soft);
  --color-surface-hover: var(--warm-surface-hover);
  --color-text: var(--warm-text);
  --color-text-secondary: var(--warm-muted-strong);
  --color-text-muted: var(--warm-muted);
  --color-text-disabled: #a89887;
  --color-border: var(--warm-border);
  --color-border-subtle: var(--warm-border-soft);
  --color-disabled: #e8ddd0;
  --color-action: var(--warm-action);
  --color-action-strong: var(--warm-action-strong);
  --color-focus: var(--warm-gold);
  --radius-control: 10px;
  --radius-card: 16px;
  --radius-modal: 20px;
  --motion-fast: 160ms;
  --motion-standard: 220ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --layer-sticky: 10;
  --layer-sidebar: 20;
  --layer-scrim: 30;
  --layer-sidebar-drawer: 40;
  --layer-sidebar-control: 41;
  --layer-modal: 50;
  --layer-toast: 70;
  --layer-tooltip: 80;
}