/* M3 Expressive Design System Tokens - LitDB */
:root, [data-theme="light"] {
    --md-sys-color-background: #f8f9fa;
    --md-sys-color-surface: #ffffff;
    --md-sys-color-surface-container-low: #f0f4f9;
    --md-sys-color-surface-container: #e9eef6;
    --md-sys-color-surface-container-high: #e1e7f0;
    --md-sys-color-surface-container-highest: #d5deec;

    --md-sys-color-on-surface: #1f1f1f;
    --md-sys-color-on-surface-variant: #444746;
    --md-sys-color-outline-variant: rgba(0, 0, 0, 0.06);

    --md-sys-color-primary: #0b57d0;
    --md-sys-color-primary-hover: #0842a0;
    --md-sys-color-primary-container: #d3e3fd;
    --md-sys-color-on-primary-container: #041e49;
    --md-sys-color-on-primary: #ffffff;

    --md-sys-color-secondary: #6750a4;
    --md-sys-color-secondary-container: #e8def8;
    --md-sys-color-on-secondary-container: #1d192b;

    --md-sys-color-accent-green: #c4eed0;
    --md-sys-color-on-accent-green: #072100;
    --md-sys-color-error: #dc2626;
    --md-sys-color-error-container: #ffdad6;
    --md-sys-color-on-error-container: #410002;
    --md-sys-color-success: #16a34a;
    --md-sys-color-success-container: #dcfce7;
    --md-sys-color-on-success-container: #14532d;

    --md-radius-xs: 4px;
    --md-radius-s: 8px;
    --md-radius-m: 12px;
    --md-radius-l: 16px;
    --md-radius-xl: 24px;
    --md-radius-pill: 9999px;

    --md-sys-elevation-1: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
    --md-sys-elevation-2: 0 4px 12px rgba(0,0,0,0.06), 0 12px 28px rgba(0,0,0,0.04);
    --md-sys-elevation-3: 0 12px 32px rgba(0,0,0,0.08), 0 24px 56px rgba(0,0,0,0.06);

    --md-transition-fast: 0.15s cubic-bezier(0.2, 0.0, 0.0, 1.0);
    --md-transition-normal: 0.25s cubic-bezier(0.2, 0.0, 0.0, 1.0);
    --md-transition-expressive: 0.35s cubic-bezier(0.2, 0.0, 0.0, 1.0);

    --md-sys-font-brand: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --md-sys-font-code: "Roboto Mono", "JetBrains Mono", monospace;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --md-sys-color-background: #111318;
        --md-sys-color-surface: #191c20;
        --md-sys-color-surface-container-low: #212429;
        --md-sys-color-surface-container: #2b2f36;
        --md-sys-color-surface-container-high: #363a42;
        --md-sys-color-surface-container-highest: #424750;

        --md-sys-color-on-surface: #e2e2e9;
        --md-sys-color-on-surface-variant: #c4c6d0;
        --md-sys-color-outline-variant: rgba(255, 255, 255, 0.06);

        --md-sys-color-primary: #a8c7fa;
        --md-sys-color-primary-hover: #c2e7ff;
        --md-sys-color-primary-container: #004a77;
        --md-sys-color-on-primary-container: #c2e7ff;
        --md-sys-color-on-primary: #002d4f;

        --md-sys-color-secondary: #d0bcff;
        --md-sys-color-secondary-container: #4a4458;
        --md-sys-color-on-secondary-container: #e8def8;

        --md-sys-color-accent-green: #1f5232;
        --md-sys-color-on-accent-green: #c4eed0;
        --md-sys-color-error: #ffb4ab;
        --md-sys-color-error-container: #93000a;
        --md-sys-color-on-error-container: #ffdad6;
        --md-sys-color-success: #4ade80;
        --md-sys-color-success-container: #14532d;
        --md-sys-color-on-success-container: #dcfce7;

        --md-sys-elevation-1: 0 2px 8px rgba(0, 0, 0, 0.28);
        --md-sys-elevation-2: 0 8px 24px rgba(0, 0, 0, 0.38);
        --md-sys-elevation-3: 0 16px 48px rgba(0, 0, 0, 0.48);
    }
}

[data-theme="dark"] {
    --md-sys-color-background: #111318;
    --md-sys-color-surface: #191c20;
    --md-sys-color-surface-container-low: #212429;
    --md-sys-color-surface-container: #2b2f36;
    --md-sys-color-surface-container-high: #363a42;
    --md-sys-color-surface-container-highest: #424750;

    --md-sys-color-on-surface: #e2e2e9;
    --md-sys-color-on-surface-variant: #c4c6d0;
    --md-sys-color-outline-variant: rgba(255, 255, 255, 0.06);

    --md-sys-color-primary: #a8c7fa;
    --md-sys-color-primary-hover: #c2e7ff;
    --md-sys-color-primary-container: #004a77;
    --md-sys-color-on-primary-container: #c2e7ff;
    --md-sys-color-on-primary: #002d4f;

    --md-sys-color-secondary: #d0bcff;
    --md-sys-color-secondary-container: #4a4458;
    --md-sys-color-on-secondary-container: #e8def8;

    --md-sys-color-accent-green: #1f5232;
    --md-sys-color-on-accent-green: #c4eed0;
    --md-sys-color-error: #ffb4ab;
    --md-sys-color-error-container: #93000a;
    --md-sys-color-on-error-container: #ffdad6;
    --md-sys-color-success: #4ade80;
    --md-sys-color-success-container: #14532d;
    --md-sys-color-on-success-container: #dcfce7;

    --md-sys-elevation-1: 0 2px 8px rgba(0, 0, 0, 0.28);
    --md-sys-elevation-2: 0 8px 24px rgba(0, 0, 0, 0.38);
    --md-sys-elevation-3: 0 16px 48px rgba(0, 0, 0, 0.48);
}