:root {
  color-scheme: light;
  --color-primary: #0b0f0e;
  --color-on-primary: #ffffff;
  --color-brand: #00b88a;
  --color-brand-deep: #087a5f;
  --color-brand-soft: #e7f8f2;
  --color-brand-ink: #075e4a;
  --color-canvas: #f7f8f6;
  --color-surface: #ffffff;
  --color-surface-subtle: #f0f3f1;
  --color-surface-selected: #eaf7f2;
  --color-ink: #171a19;
  --color-charcoal: #2d3330;
  --color-secondary: #5e6863;
  --color-muted: #89938e;
  --color-disabled: #aeb7b2;
  --color-hairline: #e1e6e3;
  --color-hairline-strong: #cbd3cf;
  --color-focus: #117f65;
  --color-success: #087a57;
  --color-success-soft: #e6f6ef;
  --color-warning: #8a6100;
  --color-warning-soft: #fff6d8;
  --color-error: #b93232;
  --color-error-soft: #fdecec;
  --color-info: #285ea8;
  --color-info-soft: #eaf2fc;

  --font-sans: Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  --control-radius: 8px;
  --control-height: 44px;
  /* Action controls have their own palette; text and status colors stay semantic. */
  --button-radius: 12px;
  --button-radius-sm: 8px;
  --button-primary: #17644f;
  --button-primary-hover: #12513f;
  --button-primary-active: #0e4233;
  --button-on-primary: #ffffff;
  --button-secondary: #ffffff;
  --button-secondary-hover: #f1f5f2;
  --button-secondary-border: #d5ded8;
  --button-secondary-ink: #384b40;
  --button-soft: #eaf3ee;
  --button-soft-hover: #dcebe2;
  --button-soft-ink: #245e46;
  --button-danger: #a8323b;
  --button-danger-bg: #fff1f1;
  --button-danger-hover: #fce3e5;
  --button-danger-border: #efd0d4;
  --button-shadow: 0 1px 2px rgb(18 63 43 / 10%), inset 0 1px 0 rgb(255 255 255 / 10%);
  --font-size-caption: 12px;
  --font-size-small: 14px;
  --font-size-body: 16px;
  --font-size-card: 18px;
  --font-size-section: 24px;
  --font-size-page: 32px;
  --font-size-hero: 40px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  --content-max: 1200px;
  --reading-max: 760px;
  --form-max: 560px;
  --nav-height: 64px;
  --mobile-nav-height: 64px;
  --shadow-sm: 0 2px 8px rgba(16, 24, 20, 0.03);
  --shadow-md: 0 18px 45px rgba(16, 24, 20, 0.09);
  --motion-fast: 120ms ease-out;
  --motion-standard: 180ms ease-out;
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-primary: #f2f5f3;
  --color-on-primary: #101512;
  --color-brand: #39d2aa;
  --color-brand-deep: #5de0bd;
  --color-brand-soft: #16362c;
  --color-brand-ink: #85e8cd;
  --color-canvas: #0d1210;
  --color-surface: #141a17;
  --color-surface-subtle: #1b231f;
  --color-surface-selected: #19362d;
  --color-ink: #f2f5f3;
  --color-charcoal: #d5dcd8;
  --color-secondary: #b3bdb8;
  --color-muted: #87918c;
  --color-disabled: #65706a;
  --color-hairline: #29322e;
  --color-hairline-strong: #3a4741;
  --color-focus: #6be1c2;
  --color-success: #78ddba;
  --color-success-soft: #16362b;
  --color-warning: #e9c45f;
  --color-warning-soft: #3a3118;
  --color-error: #ff9a9a;
  --color-error-soft: #3b2020;
  --color-info: #9ec5ff;
  --color-info-soft: #1d2b40;
  --button-primary: #8cd8b7;
  --button-primary-hover: #a5e5c8;
  --button-primary-active: #72c7a2;
  --button-on-primary: #103c2c;
  --button-secondary: #1a2520;
  --button-secondary-hover: #26382e;
  --button-secondary-border: #3b5044;
  --button-secondary-ink: #d4e3d9;
  --button-soft: #233e30;
  --button-soft-hover: #2d4b3a;
  --button-soft-ink: #abe0c3;
  --button-danger: #ffadb5;
  --button-danger-bg: #39252a;
  --button-danger-hover: #513038;
  --button-danger-border: #65414a;
  --button-shadow: 0 1px 2px rgb(0 0 0 / 18%), inset 0 1px 0 rgb(255 255 255 / 8%);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.18), 0 6px 18px rgba(0, 0, 0, 0.14);
  --shadow-md: 0 22px 55px rgba(0, 0, 0, 0.24);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-standard: 0ms;
  }
}

@media(max-width:640px) { :root { --font-size-page:28px; --font-size-section:22px; --font-size-hero:32px; } }