:root {
  --color-bg: #f7f1e6;
  --color-bg-glow: #fff8ef;
  --color-surface: rgba(255, 255, 255, 0.96);
  --color-surface-soft: #fff7ec;
  --color-surface-muted: #f5efe4;
  --color-surface-highlight: #fff0d4;
  --color-text: #26323b;
  --color-text-soft: #5d6972;
  --color-text-faint: #7f8b95;
  --color-primary: #efa345;
  --color-primary-strong: #d9862d;
  --color-primary-soft: #ffe1b6;
  --color-secondary: #6fa6ba;
  --color-secondary-strong: #4f879e;
  --color-secondary-soft: #dcecf4;
  --color-info: #6f94a8;
  --color-info-soft: #e6eef4;
  --color-retry: #c7a06f;
  --color-retry-soft: #f5eadb;
  --color-success: #6aa57d;
  --color-success-strong: #4c8960;
  --color-success-soft: #dff0e5;
  --color-complete: #5f9a80;
  --color-complete-soft: #e3f0e7;
  --color-danger: #c98585;
  --color-danger-soft: #f8e4e2;
  --color-lock: #b7c0c8;
  --color-lock-soft: #edf1f4;
  --color-border: #e7dcc8;
  --color-border-strong: #d7c6ab;
  --color-shadow-soft: rgba(87, 63, 32, 0.08);
  --color-shadow: rgba(87, 63, 32, 0.14);
  --color-overlay: rgba(38, 50, 59, 0.34);

  --font-body: "Segoe UI", "Trebuchet MS", system-ui, sans-serif;
  --font-display: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: clamp(1.95rem, 5vw, 3.1rem);
  --text-3xl: clamp(2.5rem, 7vw, 3.9rem);

  --radius-xs: 12px;
  --radius-sm: 18px;
  --radius-md: 24px;
  --radius-lg: 32px;
  --radius-xl: 40px;
  --radius-pill: 999px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.75rem;
  --space-8: 3.5rem;

  --shadow-card: 0 12px 28px var(--color-shadow-soft);
  --shadow-panel: 0 24px 64px var(--color-shadow);
  --shadow-button: 0 8px 18px rgba(217, 134, 45, 0.2);
  --shadow-press: 0 5px 12px rgba(87, 63, 32, 0.12);

  --content-width: 56rem;
  --content-narrow: 34rem;
  --touch-target: 3.5rem;
  --touch-target-compact: 3rem;
  --transition-fast: 140ms ease;
  --transition-soft: 220ms ease;
  --transition-slow: 320ms ease;
}

body[data-calm-mode="true"] {
  --color-primary: #caa670;
  --color-primary-strong: #b88f57;
  --color-primary-soft: #efe1cc;
  --color-secondary: #8ea8b1;
  --color-secondary-strong: #708f99;
  --color-secondary-soft: #e5edf0;
  --color-info: #889ea8;
  --color-info-soft: #ebf0f2;
  --color-retry: #b79b74;
  --color-retry-soft: #efe5d7;
  --color-success: #7ca08a;
  --color-success-soft: #e5efe8;
  --color-complete: #789786;
  --color-complete-soft: #e6efe8;
  --shadow-card: 0 10px 24px rgba(87, 63, 32, 0.07);
  --shadow-panel: 0 18px 44px rgba(87, 63, 32, 0.09);
  --shadow-button: 0 6px 14px rgba(113, 88, 56, 0.15);
}