:root {
    /* M3 Font sizes */
    --display-large: 57px;
    --display-medium: 45px;
    --display-small: 36px;
    --headline-large: 32px;
    --headline-medium: 28px;
    --headline-small: 24px;
    --title-large: 22px;
    --title-medium: 16px;
    --title-small: 14px;
    --label-large: 14px;
    --label-medium: 12px;
    --label-small: 11px;
    --body-large: 16px;
    --body-medium: 14px;
    --body-small: 12px;

    /* M3 Colors — light mode (dusty rose / warm mauve) */
    --primary: #8C7474;
    --on-primary: #FFFFFF;
    --on-surface: #201A1A;
    --on-surface-variant: #534343;
    --surface-container-high: #DED7D7;
    --surface-container-low: #EBE5E5;
    --surface-container-lowest: #FFFFFF;
    --background: #F5F0F0;

    --on-secondary: #534343;
    --secondary-container: #FFDAD8;

    --inverse-surface: #362F2F;
    --inverse-on-surface: #FDEEED;
    --inverse-primary: #D4B8B8;

    --primary-opacity-0-08: rgba(140, 116, 116, 0.08);
    --primary-opacity-0-12: rgba(140, 116, 116, 0.12);

    /* #201A1A with opacity */
    --on-surface-opacity-0-08: rgba(32, 26, 26, 0.08);
    --on-surface-opacity-0-12: rgba(32, 26, 26, 0.12);

    /* #534343 with opacity */
    --on-surface-variant-opacity-0-08: rgba(83, 67, 67, 0.08);
    --on-surface-variant-opacity-0-12: rgba(83, 67, 67, 0.12);

    /* divider */
    --outline: #857070;
    --outline-variant: #D8C2C2;

    /* Spacing tokens */
    --spacing-2:  2px;
    --spacing-4:  4px;
    --spacing-6:  6px;
    --spacing-8:  8px;
    --spacing-16: 16px;
    --spacing-24: 24px;
    --spacing-32: 32px;
    --spacing-40: 40px;
    --spacing-48: 48px;
    --spacing-56: 56px;
    --spacing-64: 64px;
    --spacing-72: 72px;
    --spacing-80: 80px;

    /* Radius tokens */
    --radius-4:  4px;
    --radius-8:  8px;
    --radius-12: 12px;
    --radius-16: 16px;
    --radius-24: 24px;
    --radius-48: 48px;

    /* Transitions */
    --default-transition: ease 0.2s;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --primary: #D4B8B8;
        --on-primary: #4B2020;
        --on-surface: #EDE0DF;
        --on-surface-variant: #D8C2C2;
        --surface-container-high: #2F2929;
        --surface-container-low: #201A1A;
        --surface-container-lowest: #120D0D;
        --background: #181211;

        --on-secondary: #EDE0DF;
        --secondary-container: #564040;

        --inverse-surface: #EDE0DF;
        --inverse-on-surface: #362F2F;
        --inverse-primary: #8C7474;

        --primary-opacity-0-08: rgba(212, 184, 184, 0.08);
        --primary-opacity-0-12: rgba(212, 184, 184, 0.12);

        --on-surface-opacity-0-08: rgba(237, 224, 223, 0.08);
        --on-surface-opacity-0-12: rgba(237, 224, 223, 0.12);

        --on-surface-variant-opacity-0-08: rgba(216, 194, 194, 0.08);
        --on-surface-variant-opacity-0-12: rgba(216, 194, 194, 0.12);

        --outline: #A08888;
        --outline-variant: #534343;
    }
}

:root[data-theme="dark"] {
    --primary: #D4B8B8;
    --on-primary: #4B2020;
    --on-surface: #EDE0DF;
    --on-surface-variant: #D8C2C2;
    --surface-container-high: #2F2929;
    --surface-container-low: #201A1A;
    --surface-container-lowest: #120D0D;
    --background: #181211;

    --on-secondary: #EDE0DF;
    --secondary-container: #564040;

    --inverse-surface: #EDE0DF;
    --inverse-on-surface: #362F2F;
    --inverse-primary: #8C7474;

    --primary-opacity-0-08: rgba(212, 184, 184, 0.08);
    --primary-opacity-0-12: rgba(212, 184, 184, 0.12);

    --on-surface-opacity-0-08: rgba(237, 224, 223, 0.08);
    --on-surface-opacity-0-12: rgba(237, 224, 223, 0.12);

    --on-surface-variant-opacity-0-08: rgba(216, 194, 194, 0.08);
    --on-surface-variant-opacity-0-12: rgba(216, 194, 194, 0.12);

    --outline: #A08888;
    --outline-variant: #534343;
}