/* Spacing
   ========================================================================== */
:root {
    --spacing--pico: .25rem; /* 4px */
    --spacing--nano: .5rem; /* 8px */
    --spacing--micro: .75rem; /* 12px */
    --spacing--milli: .875rem; /* 14px */
    --spacing--uno: 1rem; /* 16px */
    --spacing--kilo: 1.25rem; /* 20px */
    --spacing--mega: 1.5rem; /* 24px */
    --spacing--giga: 2rem; /* 32px */
    --spacing--tera: 2.5rem; /* 40px */
    --spacing--peta: 3rem; /* 48px */
    --spacing--exa: 4rem; /* 64px */
    --spacing--zetta: 5rem; /* 80px */
    --spacing--yotta: 6rem; /* 96px */
}

/* Max-widths
   ========================================================================== */
:root {
    --frame-max-width--default: 53rem; /* 848px */
    --frame-max-width--medium: 80rem; /* 1280px e.g. ThemeHighlights */
    --frame-max-width--large: 90.125rem; /* 1442px e.g. */
    --frame-max-width--hero: 112.5rem; /* 1800px e.g. Carousel Hero */
    --hero-max-width: 66.5rem;
    --hero-height--mobile: 18.75rem;
    --hero-height--desktop: 27.5rem;
    --header-max-width: 80rem;
    --footer-max-width: 90.125rem;
    --screen-max-width: 130rem;
    --highlight-max-width: 66.25rem;
}

/* Paddings / Margins
   ========================================================================== */
:root {
    --spacing-block--small: 1.5rem;
    --spacing-inline--small: 1.25rem;
    --spacing-block--medium: 2rem;
    --spacing-inline--medium: 4rem;
    --spacing-block--large: 2.5rem;
    --spacing-inline--large: 5rem;

    --food-menu-price-width: 9rem;
}