:root {
    color-scheme: light;
    --color-bg: #F8F6F0;
    --color-surface: #FFFFFF;
    --color-surface-subtle: #FAF9F6;
    --color-surface-soft: #F5F5F4;
    --color-text: #1C1917;
    --color-text-secondary: #57534E;
    --color-text-muted: #78716C;
    --color-text-faint: #A8A29E;
    --color-border: #E5DFD3;
    --color-border-strong: #D6D3D1;
    --color-primary: #16A34A;
    --color-primary-strong: #15803D;
    --color-on-primary: #FFFFFF;
    --color-primary-soft: #DCFCE7;
    --color-success-soft: #F0FDF4;
    --color-success-border: #BBF7D0;
    --color-warning-soft: #FEF3C7;
    --color-warning-border: #FDE68A;
    --color-warning: #F59E0B;
    --color-warning-text: #B45309;
    --color-warning-icon: #D97706;
    --color-danger-soft: #FEE2E2;
    --color-danger-softer: #FEF2F2;
    --color-danger-border: #FECACA;
    --color-danger: #DC2626;
    --color-danger-strong: #991B1B;
    --color-orange-soft: #FFEDD5;
    --color-orange-text: #C2410C;
    --color-orange: #EA580C;
    --color-yellow-soft: #FEFCE8;
    --color-yellow-border: #FDE047;
    --color-yellow-text: #CA8A04;
    --color-indigo-soft: #E0E7FF;
    --color-indigo-text: #4338CA;
    --color-purple-soft: #F3E8FF;
    --color-purple-text: #7E22CE;
    --color-teal: #10B981;
    --color-hero: #1E293B;
    --color-hero-border: #334155;
    --color-hero-text: #FFFFFF;
    --color-hero-muted: #94A3B8;
    --color-hero-secondary: #CBD5E1;
    --color-hero-chip: #FFFFFF14;
    --color-hero-chip-border: #475569;
    --color-cover: #0F172A;
    --color-cover-amber: #78350F;
    --color-cover-indigo: #1E1B4B;
    --color-cover-emerald: #064E3B;
    --color-notification: #EF4444;
    --color-new-soft: #FEF08A;
    --color-new-text: #854D0E;
    --color-modal-border: #FCA5A5;
    --color-neutral-strong: #4B5563;
    --color-backdrop: #0F131ACC;
    --color-focus: #15803D;
    --font-display: Inter, "Noto Sans TC", system-ui, sans-serif;
    --font-body: Inter, "Noto Sans TC", system-ui, sans-serif;
    --space-2xs: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 20px;
    --space-xl: 24px;
    --space-2xl: 32px;
    --space-3xl: 40px;
    --space-4xl: 64px;
    --text-xs: 11px;
    --text-sm: 12px;
    --text-md: 13px;
    --text-lg: 14px;
    --text-xl: 16px;
    --text-2xl: 18px;
    --text-3xl: 20px;
    --text-display: 28px;
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-2xl: 14px;
    --radius-3xl: 16px;
    --radius-round: 999px;
    --rule-thin: 1px;
    --rule-emphasis: 2px;
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-in: cubic-bezier(.7, 0, .84, 0);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --dur-fast: 110ms;
    --dur-base: 180ms;
    --dur-slow: 260ms;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --color-bg: #0F131A;
    --color-surface: #181D26;
    --color-surface-subtle: #141923;
    --color-surface-soft: #252C38;
    --color-text: #F1F4F8;
    --color-text-secondary: #C3CAD6;
    --color-text-muted: #929DAB;
    --color-text-faint: #6E7888;
    --color-border: #323B4A;
    --color-border-strong: #4B586A;
    --color-primary: #6EA8FF;
    --color-primary-strong: #A7C7FF;
    --color-on-primary: #0B1423;
    --color-primary-soft: #1D3155;
    --color-success-soft: #172B40;
    --color-success-border: #4B78A8;
    --color-warning-soft: #3B311B;
    --color-warning-border: #80652B;
    --color-warning: #F2C66D;
    --color-warning-text: #F2C66D;
    --color-warning-icon: #F2C66D;
    --color-danger-soft: #3C2029;
    --color-danger-softer: #301B22;
    --color-danger-border: #80505F;
    --color-danger: #F47E91;
    --color-danger-strong: #FFB0BC;
    --color-orange-soft: #3A261F;
    --color-orange-text: #FFAD87;
    --color-orange: #F39A70;
    --color-yellow-soft: #383019;
    --color-yellow-border: #8A792B;
    --color-yellow-text: #F0CF72;
    --color-indigo-soft: #252A53;
    --color-indigo-text: #AAB8FF;
    --color-purple-soft: #382442;
    --color-purple-text: #D3A6F2;
    --color-teal: #6CCBE0;
    --color-hero: #171C28;
    --color-hero-border: #424E63;
    --color-hero-text: #F2F4F8;
    --color-hero-muted: #AAB4C3;
    --color-hero-secondary: #D2D8E1;
    --color-hero-chip: #FFFFFF14;
    --color-hero-chip-border: #596A84;
    --color-cover: #0E121B;
    --color-cover-amber: #2C1A11;
    --color-cover-indigo: #15172C;
    --color-cover-emerald: #13263B;
    --color-notification: #F47E91;
    --color-new-soft: #3D3218;
    --color-new-text: #F3D076;
    --color-modal-border: #A35D70;
    --color-neutral-strong: #C5CBD3;
    --color-backdrop: #070A0FCC;
    --color-focus: #A7C7FF;
}