: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: 18px;
    --body-medium: 16px;
    --body-small: 14px;

    /* Font-family/weight tokens. Each Manrope weight ships as its own font
       family (see fonts.css), so weight is selected by swapping this token,
       not by font-weight. Always include the Arial/Helvetica fallback tier. */
    --font-extralight: "Manrope-ExtraLight", Arial, Helvetica, sans-serif;
    --font-light:      "Manrope-Light", Arial, Helvetica, sans-serif;
    --font-regular:    "Manrope-Regular", Arial, Helvetica, sans-serif;
    --font-medium:     "Manrope-Medium", Arial, Helvetica, sans-serif;
    --font-semibold:   "Manrope-SemiBold", Arial, Helvetica, sans-serif;
    --font-bold:       "Manrope-Bold", Arial, Helvetica, sans-serif;
    --font-extrabold:  "Manrope-ExtraBold", Arial, Helvetica, sans-serif;

    /* M3 Colors, light mode (dark chocolate primary; dusty rose is the dark-mode primary, see below) */
    --primary: #3A2C2C;
    --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: #E6D2D1;

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

    --primary-opacity-0-08: rgba(58, 44, 44, 0.08);
    --primary-opacity-0-12: rgba(58, 44, 44, 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;

    /* Error / danger */
    --error: #B3261E;
    --error-hover: #882E2B;
    --error-container: #FCE4E4;
    --on-error-container: #B3261E;
    --error-opacity-0-08: rgba(179, 38, 30, 0.08);

    /* Success */
    --success: #2F743E;
    --success-hover: #22592E;
    --success-container: #DFF1E3;

    /* Info */
    --info: #3E6298;
    --info-hover: #2C4A77;
    --info-container: #E5ECF5;

    /* Brand accent palette, sampled from the Figma logo (node 261:171 / 209:746) */
    --brand-blue: #4E71A5;
    --brand-blue-soft: rgba(78, 113, 165, 0.14);
    --brand-green: #3F9D5E;
    --brand-green-soft: rgba(63, 157, 94, 0.14);
    --brand-coral: #C24E4E;
    --brand-coral-soft: rgba(194, 78, 78, 0.14);
    --brand-tan: #B9835F;
    --brand-tan-soft: rgba(185, 131, 95, 0.16);

    /* Fixed-luminance variants for white text laid directly on the color
       (badges, CTA gradient): stay this saturated in both themes so the
       text keeps AA contrast instead of washing out against the paler
       dark-mode brand hues above. */
    --brand-blue-on-white: #4E71A5;
    --brand-green-on-white: #2E8350;
    --brand-coral-on-white: #C24E4E;

    /* 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;

    /* Breakpoints (documented convention, not enforceable here: CSS custom
       properties cannot be read inside @media conditions). Reuse these exact
       pixel values in new @media queries instead of picking a new one.
         520px       -- grid/list collapses to a single column (small phone)
         599 / 600px -- modal vs. bottom-sheet layout switch
         800 / 801px -- app-shell breakpoint: bottom nav vs. side nav,
                        recipe-page image layout
         860px       -- marketing landing page (index.html) grid collapse;
                        distinct from 800/801 because the landing page has no
                        side nav to make room for
       Any other max-width in this codebase (e.g. .photo-band's 720px) is a
       one-off tied to that element's own content, not a shared breakpoint;
       leave those as local values. */

    /* Elevation (box-shadow depths) */
    --elevation-1: 0 1px 3px rgba(0, 0, 0, 0.12);   /* resting: active tab indicator */
    --elevation-2: 0 2px 12px rgba(0, 0, 0, 0.15);  /* floating: dropdown menus, popovers */
    --elevation-3: 0 4px 12px rgba(0, 0, 0, 0.2);   /* overlay: snackbar/toast */

    /* 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: #3A2C2C;

        --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;

        --error: #E88787;
        --error-hover: #D17E7B;
        --error-container: #4A2020;
        --on-error-container: #F2B8B5;
        --error-opacity-0-08: rgba(232, 135, 135, 0.08);

        --success: #8ECC9C;
        --success-hover: #69BF7C;
        --success-container: #27492F;

        --info: #A6BAD9;
        --info-hover: #809ECB;
        --info-container: #273549;

        --brand-blue: #8FADD9; --brand-blue-soft: rgba(143, 173, 217, 0.16);
        --brand-green: #7FD79A; --brand-green-soft: rgba(127, 215, 154, 0.16);
        --brand-coral: #E39191; --brand-coral-soft: rgba(227, 145, 145, 0.16);
        --brand-tan: #DCAA8B; --brand-tan-soft: rgba(220, 170, 139, 0.18);
    }
}

: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: #3A2C2C;

    --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;

    --error: #E88787;
    --error-hover: #D17E7B;
    --error-container: #4A2020;
    --on-error-container: #F2B8B5;
    --error-opacity-0-08: rgba(232, 135, 135, 0.08);

    --success: #8ECC9C;
    --success-hover: #69BF7C;
    --success-container: #27492F;

    --info: #A6BAD9;
    --info-hover: #809ECB;
    --info-container: #273549;

    --brand-blue: #8FADD9; --brand-blue-soft: rgba(143, 173, 217, 0.16);
    --brand-green: #7FD79A; --brand-green-soft: rgba(127, 215, 154, 0.16);
    --brand-coral: #E39191; --brand-coral-soft: rgba(227, 145, 145, 0.16);
    --brand-tan: #DCAA8B; --brand-tan-soft: rgba(220, 170, 139, 0.18);
}