:root {
    color-scheme: light;

    --container-max: 1366px;
    --radius: 12px;
    --radius-10: 10px;
    --radius-lg: 16px;
    --radius-round: 999px;
    --border-color: #cdd8df;
    --border: 1px solid var(--border-color);

    --space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-64: 64px;

    --font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --font-size-base: 16px;
    --line-height-base: 1.4;
    --h1-size: 28px;
    --h1-line-height: 32px;
    --h2-size: 22px;
    --h2-line-height: 28px;
    --h3-size: 18px;
    --h3-line-height: 24px;
    --body-size: 16px;
    --body-line-height: 22px;
    --small-size: 13px;
    --small-line-height: 18px;

    --bg: #ffffff;
    --surface: #f7f8fa;
    --surface-2: #ffffff;
    --text: #0b1220;
    --text-muted: #556070;
    --primary: #0b5cff;
    --primary-hover: #0846d6;
    --primary-contrast: #ffffff;
    --accent: #e5006d;
    --shadow: 0 8px 24px rgba(11, 18, 32, 0.12);
    --shadow-lg: 0 14px 32px rgba(11, 18, 32, 0.16);
    --focus: 2px solid rgba(59, 130, 246, 0.9);
    --ring: 0 0 0 3px rgba(59, 130, 246, 0.25);
    --overlay-scrim: rgba(11, 18, 32, 0.56);

    --savings-accent: #e5006d;
    --star-gold: #f1bf42;

    --breakpoint-mobile-max: 767.98px;
    --breakpoint-tablet-min: 768px;
    --breakpoint-tablet-max: 1023.98px;
    --breakpoint-desktop-min: 1024px;
    --breakpoint-compact-max: 599.98px;

    /* Current DS aliases */
    --ui-primary: var(--primary);
    --ui-primary-hover: var(--primary-hover);
    --ui-secondary-bg: var(--surface-2);
    --ui-secondary-text: var(--text);
    --ui-border-color: var(--border-color);
    --ui-focus-ring: rgba(59, 130, 246, 0.28);

    /* Legacy aliases used across pages/components */
    --color-primary: var(--primary);
    --color-primary-dark: var(--primary-hover);
    --color-primary-rgb: 11, 92, 255;
    --color-background: var(--bg);
    --color-surface: var(--surface-2);
    --color-text-primary: var(--text);
    --color-text-secondary: var(--text-muted);
    --color-text-tertiary: var(--text-muted);
    --color-text-disabled: var(--border-color);
    --brand-primary: var(--primary);
    --brand-primary-hover: var(--primary-hover);
    --bg-main: var(--bg);
    --bg-alt: var(--surface);
    --bg-card: var(--surface-2);
    --bg-surface: var(--surface-2);
    --text-main: var(--text);
    --text-strong: var(--text);
    --text-body: var(--text);
    --text-subtle: var(--text-muted);
    --border-default: var(--border-color);
    --border-subtle: var(--border-color);
    --border-soft: var(--border-color);
    --surface-shell: var(--surface);
    --surface-canvas: var(--surface-2);
    --surface-card: var(--surface-2);
    --surface-muted: #eef2f7;
    --focus-ring: rgba(59, 130, 246, 0.35);
    --elevation-1: 0 2px 8px rgba(11, 18, 32, 0.07);
    --elevation-2: var(--shadow);
    --elevation-3: var(--shadow-lg);
}

html[data-theme="dark"] {
    color-scheme: dark;

    --bg: #070a12;
    --surface: #0c1220;
    --surface-2: #101a2b;
    --text: #e8eefc;
    --text-muted: #a9b4c7;
    --border-color: rgba(205, 216, 223, 0.18);
    --primary: #3b82f6;
    --primary-hover: #60a5fa;
    --primary-contrast: #071018;
    --accent: #ff4aa6;
    --shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 20px 42px rgba(0, 0, 0, 0.55);
    --focus: 2px solid rgba(96, 165, 250, 0.95);
    --ring: 0 0 0 3px rgba(96, 165, 250, 0.3);
    --overlay-scrim: rgba(3, 7, 18, 0.72);

    --color-primary-rgb: 59, 130, 246;
    --surface-muted: #182235;
    --focus-ring: rgba(96, 165, 250, 0.35);
}

html,
body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
}