:root {
    color-scheme: light;

    --color-primary: #c6613f;
    --color-primary-pressed: #ad5233;
    --color-on-primary: #ffffff;

    --color-background: #f7f3ee;
    --color-surface: #ffffff;
    --color-surface-raised: #ffffff;
    --color-surface-muted: #efe9e1;
    --color-surface-pressed: #e6ded4;
    --color-border: #e7dfd5;
    --color-text: #2b2420;
    --color-text-secondary: #6e645c;
    --color-text-tertiary: #a2978d;
    --color-primary-tint: #f7e4db;
    --color-primary-on-tint: #a44c2e;
    --color-danger: #c0392b;
    --color-danger-tint: #fbe5e1;
    --color-warning: #a8620a;
    --color-warning-tint: #fbefd9;
    --color-scrim: rgb(28 22 18 / 0.45);
    --shadow-card: 0 1px 2px rgb(43 36 32 / 0.06), 0 4px 16px rgb(43 36 32 / 0.04);
    --shadow-sheet: 0 -8px 32px rgb(43 36 32 / 0.12);
    --shadow-popover: 0 8px 32px rgb(43 36 32 / 0.14);

    --font-family: 'Nunito', system-ui, sans-serif;
    --text-display: 700 26px / 1.2 var(--font-family);
    --text-title: 700 20px / 1.25 var(--font-family);
    --text-headline: 700 16px / 1.3 var(--font-family);
    --text-body: 500 15px / 1.45 var(--font-family);
    --text-callout: 600 14px / 1.4 var(--font-family);
    --text-caption: 600 12px / 1.3 var(--font-family);

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;

    --radius-small: 10px;
    --radius-medium: 14px;
    --radius-large: 20px;
    --radius-sheet: 28px;
    --radius-round: 999px;

    --duration-fast: 140ms;
    --duration-medium: 240ms;
    --easing-standard: cubic-bezier(0.2, 0, 0, 1);
    --easing-emphasized: cubic-bezier(0.3, 0, 0, 1);

    --control-height: 44px;
    --page-padding: 20px;
    --content-max-width: 560px;
    --ad-banner-height: clamp(110px, 18dvh, 180px);
}

:root[data-theme='dark'] {
    color-scheme: dark;
    --color-primary: #d4704d;
    --color-primary-pressed: #bd6241;

    --color-background: #171412;
    --color-surface: #221e1b;
    --color-surface-raised: #3a332e;
    --color-surface-muted: #2b2622;
    --color-surface-pressed: #342e29;
    --color-border: #332d28;
    --color-text: #f4eee8;
    --color-text-secondary: #b4a99f;
    --color-text-tertiary: #7f756c;
    --color-primary-tint: #3b2820;
    --color-primary-on-tint: #f0a283;
    --color-danger: #d9604f;
    --color-danger-tint: #3d2320;
    --color-warning: #e3a54f;
    --color-warning-tint: #3a2d1a;
    --color-scrim: rgb(0 0 0 / 0.6);
    --shadow-card: 0 0 #0000;
    --shadow-sheet: 0 0 #0000;
    --shadow-popover: 0 8px 32px rgb(0 0 0 / 0.5);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
        color-scheme: dark;
        --color-primary: #d4704d;
        --color-primary-pressed: #bd6241;

        --color-background: #171412;
        --color-surface: #221e1b;
        --color-surface-raised: #3a332e;
        --color-surface-muted: #2b2622;
        --color-surface-pressed: #342e29;
        --color-border: #332d28;
        --color-text: #f4eee8;
        --color-text-secondary: #b4a99f;
        --color-text-tertiary: #7f756c;
        --color-primary-tint: #3b2820;
        --color-primary-on-tint: #f0a283;
        --color-danger: #d9604f;
        --color-danger-tint: #3d2320;
        --color-warning: #e3a54f;
        --color-warning-tint: #3a2d1a;
        --color-scrim: rgb(0 0 0 / 0.6);
        --shadow-card: 0 0 #0000;
        --shadow-sheet: 0 0 #0000;
        --shadow-popover: 0 8px 32px rgb(0 0 0 / 0.5);
    }
}

@media (min-width: 768px) {
    :root {
        --page-padding: 32px;
        --content-max-width: 760px;
    }
}

@media (min-width: 1200px) {
    :root {
        --content-max-width: 1080px;
    }
}