:root {
  color-scheme: light dark;
  --accent: #007aff;
  --accent-strong: #0066d6;
  --accent-soft: rgba(0, 122, 255, .11);
  --coral: #ff453a;
  --ink: #111114;
  --muted: #6c6c70;
  --faint: #8e8e93;
  --bg: #f2f2f7;
  --bg-deep: #f2f2f7;
  --glass: rgba(255, 255, 255, .72);
  --glass-strong: rgba(255, 255, 255, .9);
  --field: rgba(118, 118, 128, .08);
  --stroke: rgba(0, 0, 0, .06);
  --hairline: rgba(60, 60, 67, .12);
  --shadow: 0 8px 28px rgba(0, 0, 0, .07), inset 0 .5px 0 rgba(255, 255, 255, .8);
  --shadow-soft: 0 4px 16px rgba(0, 0, 0, .05);
  --danger: #d94555;
  --success: #188a63;
  --radius-xl: 30px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --tab-height: 72px;
  --page-width: 720px;
  --surface: var(--glass);
  --surface-solid: var(--glass-strong);
  --border: var(--stroke);
  --radius: var(--radius-lg);
  --tab-h: var(--tab-height);
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #0a84ff;
    --accent-strong: #409cff;
    --ink: #f5f5f7;
    --muted: #aeaeb2;
    --faint: #8e8e93;
    --bg: #000;
    --bg-deep: #000;
    --glass: rgba(28, 28, 30, .78);
    --glass-strong: rgba(44, 44, 46, .92);
    --field: rgba(118, 118, 128, .18);
    --stroke: rgba(255, 255, 255, .09);
    --hairline: rgba(84, 84, 88, .55);
    --accent-soft: rgba(10, 132, 255, .18);
    --shadow: 0 10px 30px rgba(0, 0, 0, .22), inset 0 .5px 0 rgba(255, 255, 255, .08);
    --shadow-soft: 0 5px 18px rgba(0, 0, 0, .2);
  }
}