:root {
  color-scheme: light;
  --orange: #ff6b35;
  --orange-deep: #ed4a2b;
  --sun: #ffc83d;
  --green: #25a863;
  --green-soft: #ddf7e8;
  --cream: #fff9ef;
  --paper: #ffffff;
  --ink: #20231f;
  --muted: #73786f;
  --line: #ebe9e1;
  --surface: rgba(255, 255, 255, .86);
  --surface-soft: #f7f3ec;
  --surface-raised: #fffdf8;
  --surface-input: #faf9f5;
  --surface-nav: rgba(255, 255, 255, .94);
  --surface-orange: #fff0dc;
  --surface-orange-soft: #fff2df;
  --surface-blue: #e8efff;
  --surface-notice: #e9f8ed;
  --surface-warning: #fff0e8;
  --danger: #e74b48;
  --purple: #7868e6;
  --shadow: 0 12px 34px rgba(80, 51, 22, .11);
  --shadow-soft: 0 5px 18px rgba(61, 45, 26, .08);
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --tg-bg: var(--cream);
  --tg-text: var(--ink);
  --tg-button: var(--orange);
  --tg-button-text: #fff;
}


:root[data-theme="dark"] {
  color-scheme: dark;
  --cream: #10151f;
  --paper: #18212f;
  --ink: #f5f7fb;
  --muted: #b4becd;
  --line: #2a3547;
  --surface: rgba(24, 33, 47, .96);
  --surface-soft: #202b3a;
  --surface-raised: #202b3a;
  --surface-input: #253143;
  --surface-nav: rgba(16, 21, 31, .94);
  --surface-orange: #4f3828;
  --surface-orange-soft: #492b1e;
  --surface-blue: #263653;
  --surface-notice: #173d2b;
  --surface-warning: #492b1e;
  --green-soft: #173d2b;
  --shadow: 0 14px 34px rgba(0, 0, 0, .35);
  --shadow-soft: 0 6px 18px rgba(0, 0, 0, .24);
  --tg-bg: var(--cream);
  --tg-text: var(--ink);
}