:root {
  color-scheme: light;

  --canvas: #f5f5f7;
  --canvas-raised: #fbfbfd;
  --surface: #ffffff;
  --surface-subtle: #ececf1;
  --surface-strong: #e2e3e9;

  --ink: #1d1d1f;
  --ink-secondary: #5f6068;
  --ink-tertiary: #6b6d74;
  --ink-on-accent: #f7f8ff;

  --line: rgba(29, 29, 31, 0.12);
  --line-strong: rgba(29, 29, 31, 0.22);

  --accent: #2457d6;
  --accent-hover: #1747bd;
  --accent-pressed: #113a9c;
  --accent-soft: #e8edfc;
  --accent-softer: #f1f4fd;

  --success: #147447;
  --success-soft: #e7f5ed;
  --warning: #805600;
  --warning-soft: #fff4d6;
  --danger: #b42318;
  --danger-soft: #fcebea;

  --focus: #2457d6;
  --scrim: rgba(16, 17, 20, 0.42);

  --shadow-sm: 0 2px 8px rgba(24, 31, 54, 0.08);
  --shadow-md: 0 8px 24px rgba(24, 31, 54, 0.1);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --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: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --font-sans: "SF Pro Text", "SF Pro Display", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: "SFMono-Regular", "Cascadia Mono", ui-monospace, monospace;

  --text-caption: 0.75rem;
  --text-small: 0.875rem;
  --text-body: 1rem;
  --text-lead: 1.25rem;
  --text-subheading: 1.5rem;
  --text-heading: 2rem;

  --page-gutter: clamp(1.25rem, 4vw, 3.5rem);
  --content-width: 74rem;
  --reading-width: 44rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 160ms;
  --duration-base: 220ms;

  --z-sticky: 20;
  --z-popover: 40;
  --z-dialog: 60;
  --z-toast: 80;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #101114;
  --canvas-raised: #141519;
  --surface: #18191d;
  --surface-subtle: #222329;
  --surface-strong: #2a2c33;
  --ink: #f2f2f4;
  --ink-secondary: #b5b6bd;
  --ink-tertiary: #92949d;
  --ink-on-accent: #101114;
  --line: rgba(242, 242, 244, 0.13);
  --line-strong: rgba(242, 242, 244, 0.24);
  --accent: #91adff;
  --accent-hover: #abc0ff;
  --accent-pressed: #c3d1ff;
  --accent-soft: #202b49;
  --accent-softer: #182037;
  --success: #7ed7a9;
  --success-soft: #173427;
  --warning: #f3c96d;
  --warning-soft: #3a2d13;
  --danger: #ff9b92;
  --danger-soft: #40201f;
  --focus: #91adff;
  --scrim: rgba(0, 0, 0, 0.64);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.36);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="retail-light"]) {
    color-scheme: dark;
    --canvas: #101114;
    --canvas-raised: #141519;
    --surface: #18191d;
    --surface-subtle: #222329;
    --surface-strong: #2a2c33;
    --ink: #f2f2f4;
    --ink-secondary: #b5b6bd;
    --ink-tertiary: #92949d;
    --ink-on-accent: #101114;
    --line: rgba(242, 242, 244, 0.13);
    --line-strong: rgba(242, 242, 244, 0.24);
    --accent: #91adff;
    --accent-hover: #abc0ff;
    --accent-pressed: #c3d1ff;
    --accent-soft: #202b49;
    --accent-softer: #182037;
    --success: #7ed7a9;
    --success-soft: #173427;
    --warning: #f3c96d;
    --warning-soft: #3a2d13;
    --danger: #ff9b92;
    --danger-soft: #40201f;
    --focus: #91adff;
    --scrim: rgba(0, 0, 0, 0.64);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.28);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.36);
  }
}