:root {
    color-scheme: light dark;

    --color-primary: oklch(43% 0.08 205);
    --color-on-primary: oklch(98% 0.01 205);
    --color-background: oklch(98.5% 0.005 205);
    --color-surface: oklch(100% 0 0);
    --color-text: oklch(25% 0.02 230);
    --color-muted: oklch(48% 0.02 230);
    --color-border: oklch(88% 0.01 230);
    --color-alert: oklch(48% 0.17 25);
    --color-offline: oklch(93% 0.06 85);
    --color-on-offline: oklch(30% 0.06 70);
    --color-focus: oklch(60% 0.15 250);

    --font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-size-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --font-size-small: 0.875rem;
    --font-size-heading: clamp(1.5rem, 1.3rem + 1vw, 2rem);
    --font-size-subheading: clamp(1.125rem, 1.05rem + 0.4vw, 1.3rem);
    --font-size-amount: clamp(1.5rem, 1.3rem + 1vw, 2rem);

    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2.5rem;

    --radius: 0.5rem;
    --content-width: 40rem;
    --tap-target: 2.75rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-primary: oklch(72% 0.09 200);
        --color-on-primary: oklch(20% 0.03 220);
        --color-background: oklch(19% 0.015 230);
        --color-surface: oklch(24% 0.015 230);
        --color-text: oklch(93% 0.01 230);
        --color-muted: oklch(75% 0.015 230);
        --color-border: oklch(36% 0.015 230);
        --color-alert: oklch(75% 0.14 25);
        --color-offline: oklch(35% 0.06 80);
        --color-on-offline: oklch(93% 0.04 85);
    }
}