:root {
    color-scheme: light;
    --cc-primary: #f97316;
    --cc-primary-hover: #ea580c;
    --cc-primary-active: #c2410c;
    --cc-primary-soft: #fff1e6;
    --cc-accent: #fb923c;
    --cc-bg: #fffaf5;
    --cc-surface: #ffffff;
    --cc-surface-raised: #ffffff;
    --cc-surface-muted: #fff4e8;
    --cc-text: #21170f;
    --cc-text-secondary: #6f5847;
    --cc-text-muted: #9a7d68;
    --cc-border: #f1dccb;
    --cc-border-strong: #e8c5aa;
    --cc-shadow-sm: 0 1px 2px rgb(79 45 20 / 6%);
    --cc-shadow-md: 0 14px 36px rgb(79 45 20 / 10%);
    --cc-radius-sm: 8px;
    --cc-radius: 12px;
    --cc-radius-lg: 20px;
    --cc-container-width: 1200px;
    --cc-system-font-family: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-sans: var(--cc-site-font-family, var(--cc-system-font-family));
    --font-display: var(--font-sans);
    --color-primary: var(--cc-primary);
    --color-primary-bg: var(--cc-primary-soft);
    --color-bg: var(--cc-bg);
    --color-bg-layout: var(--cc-bg);
    --color-bg-container: var(--cc-surface);
    --color-bg-elevated: var(--cc-surface-raised);
    --color-text: var(--cc-text);
    --color-text-secondary: var(--cc-text-secondary);
    --color-text-tertiary: var(--cc-text-muted);
    --color-border: var(--cc-border);
    --color-border-secondary: var(--cc-border);
}

html.dark {
    color-scheme: dark;
    --cc-primary: #fb923c;
    --cc-primary-hover: #fdba74;
    --cc-primary-active: #f97316;
    --cc-primary-soft: #2b180d;
    --cc-accent: #f97316;
    --cc-bg: #0d0a08;
    --cc-surface: #17110d;
    --cc-surface-raised: #201711;
    --cc-surface-muted: #26180f;
    --cc-text: #fff7ed;
    --cc-text-secondary: #d9c2b2;
    --cc-text-muted: #9e8777;
    --cc-border: #3b2a20;
    --cc-border-strong: #573927;
    --cc-shadow-sm: 0 1px 2px rgb(0 0 0 / 24%);
    --cc-shadow-md: 0 18px 48px rgb(0 0 0 / 32%);
}