:root {
  color-scheme: light;
  --font-sans: Inter, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --color-bg: #f5f6f0;
  --color-bg-elevated: #eef1e8;
  --color-surface: #ffffff;
  --color-surface-soft: #f9faf6;
  --color-surface-strong: #e7ece2;
  --color-text: #17211b;
  --color-text-soft: #536158;
  --color-text-faint: #758078;
  --color-border: #dbe2d7;
  --color-border-strong: #bdc9bc;
  --color-primary: #287a4b;
  --color-primary-strong: #1d6039;
  --color-primary-soft: #dff1e5;
  --color-accent: #b9871d;
  --color-accent-strong: #825e10;
  --color-accent-soft: #f7eccd;
  --color-success: #2f8555;
  --color-danger: #c13f3f;
  --color-danger-soft: #fbe5e3;
  --color-warning: #a36c08;
  --color-warning-soft: #fff1c7;
  --color-focus: #2d7ff9;
  --header-bg: rgba(245, 246, 240, 0.86);
  --overlay-hero: linear-gradient(90deg, rgba(9, 18, 13, 0.88), rgba(9, 18, 13, 0.55) 58%, rgba(9, 18, 13, 0.32));
  --overlay-card: linear-gradient(180deg, transparent 36%, rgba(5, 12, 8, 0.88));
  --shadow-sm: 0 1px 2px rgba(19, 32, 23, 0.06), 0 8px 24px rgba(19, 32, 23, 0.05);
  --shadow-md: 0 16px 48px rgba(19, 32, 23, 0.12);
  --radius-sm: 0.65rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-pill: 999px;
  --content-width: 74rem;
  --duration-instant: 120ms;
  --duration-fast: 180ms;
  --duration-normal: 320ms;
  --duration-slow: 620ms;
  --duration-ambient: 8s;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition: var(--duration-fast) var(--ease-standard);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #0d1511;
  --color-bg-elevated: #111d17;
  --color-surface: #15221b;
  --color-surface-soft: #18271f;
  --color-surface-strong: #213329;
  --color-text: #edf4ef;
  --color-text-soft: #b3c1b7;
  --color-text-faint: #8e9e93;
  --color-border: #2b4033;
  --color-border-strong: #3e5948;
  --color-primary: #6bc58e;
  --color-primary-strong: #8bd9a8;
  --color-primary-soft: #183c28;
  --color-accent: #e1b64d;
  --color-accent-strong: #f0cb70;
  --color-accent-soft: #40351a;
  --color-success: #78d69c;
  --color-danger: #ff8d88;
  --color-danger-soft: #482322;
  --color-warning: #efc263;
  --color-warning-soft: #463919;
  --header-bg: rgba(13, 21, 17, 0.88);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.22), 0 8px 28px rgba(0, 0, 0, 0.18);
  --shadow-md: 0 18px 56px rgba(0, 0, 0, 0.3);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #0d1511;
    --color-bg-elevated: #111d17;
    --color-surface: #15221b;
    --color-surface-soft: #18271f;
    --color-surface-strong: #213329;
    --color-text: #edf4ef;
    --color-text-soft: #b3c1b7;
    --color-text-faint: #8e9e93;
    --color-border: #2b4033;
    --color-border-strong: #3e5948;
    --color-primary: #6bc58e;
    --color-primary-strong: #8bd9a8;
    --color-primary-soft: #183c28;
    --color-accent: #e1b64d;
    --color-accent-strong: #f0cb70;
    --color-accent-soft: #40351a;
    --color-success: #78d69c;
    --color-danger: #ff8d88;
    --color-danger-soft: #482322;
    --color-warning: #efc263;
    --color-warning-soft: #463919;
    --header-bg: rgba(13, 21, 17, 0.88);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.22), 0 8px 28px rgba(0, 0, 0, 0.18);
    --shadow-md: 0 18px 56px rgba(0, 0, 0, 0.3);
  }
}