:root {
    color-scheme: light;
    --color-background: #f2f2f7;
    --color-background-elevated: #ffffff;
    --color-surface: rgba(255, 255, 255, 0.96);
    --color-surface-secondary: #e9e9ef;
    --color-surface-elevated: #ffffff;
    --color-text-primary: #111114;
    --color-text-secondary: #63636a;
    --color-text-tertiary: #8e8e93;
    --color-separator: rgba(60, 60, 67, 0.16);
    --color-accent: #007aff;
    --color-accent-strong: #0064d1;
    --color-accent-soft: rgba(0, 122, 255, 0.12);
    --color-success: #248a3d;
    --color-warning: #b25000;
    --color-danger: #d70015;
    --color-protein: #3478f6;
    --color-carbs: #00a6a6;
    --color-fat: #d68b00;

    --glass-navigation-background: rgba(248, 248, 252, 0.76);
    --glass-sheet-background: rgba(251, 251, 253, 0.92);
    --glass-control-background: rgba(255, 255, 255, 0.68);
    --glass-border: rgba(255, 255, 255, 0.72);
    --glass-separator: rgba(60, 60, 67, 0.18);
    --glass-shadow: 0 12px 40px rgba(20, 20, 35, 0.13);
    --glass-blur: 24px;
    --glass-saturation: 1.45;

    --radius-small: 10px;
    --radius-medium: 14px;
    --radius-large: 20px;
    --radius-xl: 28px;
    --radius-pill: 999px;

    --spacing-2xs: 4px;
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 44px;

    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --top-bar-height: 52px;
    --tab-bar-height: 64px;
    --control-height: 46px;
    --content-max-width: 720px;
    --keyboard-inset: 0px;

    --shadow-small: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-medium: 0 8px 30px rgba(30, 30, 45, 0.09);
    --shadow-large: 0 20px 60px rgba(20, 20, 35, 0.18);
    --motion-fast: 140ms;
    --motion-normal: 220ms;
    --motion-slow: 360ms;
    --motion-curve: cubic-bezier(0.22, 0.8, 0.2, 1);

    /* Compatibility aliases while the existing business UI is migrated. */
    --bg: var(--color-background);
    --bg-soft: var(--color-surface-secondary);
    --surface: var(--color-surface);
    --surface-2: var(--color-surface-elevated);
    --surface-3: var(--color-surface-secondary);
    --border: var(--color-separator);
    --border-hover: color-mix(in srgb, var(--color-accent) 38%, transparent);
    --text: var(--color-text-primary);
    --text-secondary: var(--color-text-secondary);
    --text-muted: var(--color-text-tertiary);
    --primary: var(--color-accent);
    --primary-light: var(--color-accent);
    --primary-bg: var(--color-accent-soft);
    --primary-border: color-mix(in srgb, var(--color-accent) 32%, transparent);
    --danger: var(--color-danger);
    --danger-bg: color-mix(in srgb, var(--color-danger) 9%, transparent);
    --danger-border: color-mix(in srgb, var(--color-danger) 28%, transparent);
    --success: var(--color-success);
    --success-bg: color-mix(in srgb, var(--color-success) 9%, transparent);
    --success-border: color-mix(in srgb, var(--color-success) 28%, transparent);
    --warning: var(--color-warning);
    --protein: var(--color-protein);
    --carbs: var(--color-carbs);
    --fat: var(--color-fat);
    --radius: var(--radius-medium);
    --radius-sm: var(--radius-small);
    --radius-xs: 9px;
    --shadow-sm: var(--shadow-small);
    --shadow: var(--shadow-medium);
    --shadow-lg: var(--shadow-large);
    --transition: var(--motion-normal) var(--motion-curve);
    --app-vh: 100dvh;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --color-background: #000000;
        --color-background-elevated: #111114;
        --color-surface: rgba(28, 28, 30, 0.96);
        --color-surface-secondary: #1c1c1e;
        --color-surface-elevated: #242426;
        --color-text-primary: #f5f5f7;
        --color-text-secondary: #aeaeb2;
        --color-text-tertiary: #74747a;
        --color-separator: rgba(84, 84, 88, 0.56);
        --color-accent: #0a84ff;
        --color-accent-strong: #409cff;
        --color-accent-soft: rgba(10, 132, 255, 0.18);
        --color-success: #30d158;
        --color-warning: #ff9f0a;
        --color-danger: #ff453a;
        --glass-navigation-background: rgba(18, 18, 20, 0.74);
        --glass-sheet-background: rgba(30, 30, 32, 0.94);
        --glass-control-background: rgba(48, 48, 52, 0.7);
        --glass-border: rgba(255, 255, 255, 0.13);
        --glass-separator: rgba(255, 255, 255, 0.12);
        --glass-shadow: 0 16px 52px rgba(0, 0, 0, 0.48);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --color-background: #000000;
    --color-background-elevated: #111114;
    --color-surface: rgba(28, 28, 30, 0.96);
    --color-surface-secondary: #1c1c1e;
    --color-surface-elevated: #242426;
    --color-text-primary: #f5f5f7;
    --color-text-secondary: #aeaeb2;
    --color-text-tertiary: #74747a;
    --color-separator: rgba(84, 84, 88, 0.56);
    --color-accent: #0a84ff;
    --color-accent-strong: #409cff;
    --color-accent-soft: rgba(10, 132, 255, 0.18);
    --color-success: #30d158;
    --color-warning: #ff9f0a;
    --color-danger: #ff453a;
    --glass-navigation-background: rgba(18, 18, 20, 0.74);
    --glass-sheet-background: rgba(30, 30, 32, 0.94);
    --glass-control-background: rgba(48, 48, 52, 0.7);
    --glass-border: rgba(255, 255, 255, 0.13);
    --glass-separator: rgba(255, 255, 255, 0.12);
    --glass-shadow: 0 16px 52px rgba(0, 0, 0, 0.48);
}

:root[data-theme="light"] { color-scheme: light; }