/* Starbucks brand tokens, from unfairly.ai/brand-guidelines/starbucks (checked 2026-10-29).
   Sizes, spacing and components were measured on https://www.starbucks.com/ (computed styles and bounding boxes of every element at 390, 768, 1024, 1280, 1440 and 1920 px wide, with the cookie notice accepted, on 2026-10-29).
   Fonts: --font-* use the open stand-ins (load them from Google Fonts); --font-*-original name Starbucks's own faces, which you may only use if you have a licence. */
:root {
  --color-paper: #FFFFFF;
  --color-surface: #F2F0EB;
  --color-ink: #000000;
  --color-accent: #006241;
  --color-on-accent: #FFFFFF;
  --color-accent-secondary: #00754A;
  --color-night: #1E3932;
  --color-on-night: #FFFFFF;
  --color-light-green: #D4E9E2;
  --color-cool-neutral: #F9F9F9;
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-spring-yellow: #EED350;
  --color-spring-light-blue: #B6CBD5;
  --color-spring-coral: #D3705A;
  --color-spring-teal: #005E66;
  --color-spring-turquoise: #4C9F87;
  --color-spring-goldenrod: #C89543;
  --color-spring-spring-green: #C0D48B;
  --color-spring-blush: #EDC4C9;
  --color-summer-summer-mauve: #DD92C0;
  --color-summer-peach: #F0CDBC;
  --color-summer-yellow: #F0E0B0;
  --color-summer-soft-pink: #F0D4DC;
  --color-summer-bright-green: #4CA06F;
  --color-summer-vibrant-orange: #DC714E;
  --color-nitro-brick-red: #FF6740;
  --color-nitro-nitro-green: #3ECEA9;
  --color-nitro-coral: #E76069;
  --color-nitro-bright-purple: #8882F4;
  --color-fall-rust: #9D5116;
  --color-fall-neutral-pink: #EBCABC;
  --color-fall-almost-pumpkin: #E44C2C;
  --color-fall-mustard: #A17700;
  --color-fall-burgandy: #84233C;
  --color-site-green: #006242;
  --color-siren-green-svg: #00704A;
  --color-ink-87: #212121;
  --color-ink-58: #6B6B6B;
  --color-hairline: #E5E5E5;
  --color-button-outline-on-green-text: #FFFFFF;
  --color-button-outline-on-green-ring: #FFFFFF;
  --color-button-announcement-fill: #006242;
  --color-button-announcement-text: #FFFFFF;
  --color-button-announcement-ring: #FFFFFF;
  --color-button-outline-nav-fill: #FFFFFF;
  --color-button-outline-nav-text: #212121;
  --color-button-outline-nav-ring: #212121;
  --color-button-filled-nav-fill: #000000;
  --color-button-filled-nav-text: #FFFFFF;
  --color-button-filled-nav-ring: #000000;
  --font-display: "Plus Jakarta Sans", "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display-original: "Sodo Sans", "Plus Jakarta Sans", "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Plus Jakarta Sans", "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body-original: "Sodo Sans", "Plus Jakarta Sans", "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --page-margin: 40px;
  --container-max: 1440px;
  --nav-height: 100px;
  --grid-gutter: 0px;
  --grid-columns: 2;
  --text-feature-headline-h1-in-row-1-h2-in-rows-2-4-size: 24px;
  --text-feature-headline-h1-in-row-1-h2-in-rows-2-4-line: 1.4;
  --text-feature-headline-h1-in-row-1-h2-in-rows-2-4-weight: 600;
  --text-feature-headline-h1-in-row-1-h2-in-rows-2-4-tracking: -0.24px;
  --text-feature-body-size: 19px;
  --text-feature-body-line: 1.75;
  --text-feature-body-weight: 400;
  --text-feature-body-tracking: -0.19px;
  --text-announcement-line-size: 19px;
  --text-announcement-line-line: 1.75;
  --text-announcement-line-weight: 600;
  --text-announcement-line-tracking: -0.19px;
  --text-announcement-button-size: 19px;
  --text-announcement-button-line: 1.75;
  --text-announcement-button-weight: 400;
  --text-announcement-button-tracking: -0.19px;
  --text-feature-button-size: 16px;
  --text-feature-button-line: 1.2;
  --text-feature-button-weight: 600;
  --text-feature-button-tracking: -0.16px;
  --text-nav-link-size: 14px;
  --text-nav-link-line: 1.5;
  --text-nav-link-weight: 700;
  --text-nav-link-tracking: 1.4px;
  --text-nav-utility-find-a-caf-and-nav-buttons-size: 14px;
  --text-nav-utility-find-a-caf-and-nav-buttons-line: 1.2;
  --text-nav-utility-find-a-caf-and-nav-buttons-weight: 600;
  --text-nav-utility-find-a-caf-and-nav-buttons-tracking: -0.16px;
  --text-footnote-size: 14px;
  --text-footnote-line: 1.8;
  --text-footnote-weight: 400;
  --text-footnote-tracking: -0.14px;
  --text-footer-column-heading-size: 19px;
  --text-footer-column-heading-line: 1.29;
  --text-footer-column-heading-weight: 400;
  --text-footer-column-heading-tracking: -0.16px;
  --text-footer-link-size: 16px;
  --text-footer-link-line: 1.5;
  --text-footer-link-weight: 400;
  --text-footer-link-tracking: -0.16px;
  --text-copyright-size: 14px;
  --text-copyright-line: 1.5;
  --text-copyright-weight: 400;
  --text-copyright-tracking: -0.16px;
  --radius-button-outline-on-green: 50px;
  --radius-button-announcement: 50px;
  --radius-button-outline-nav: 50px;
  --radius-button-filled-nav: 50px;
  --duration-boomerang-loop: 2970ms;
}
/* Phone values measured at 390px; Starbucks's CSS switches at 767px. */
@media (max-width: 767px) {
  :root {
    --page-margin: 16px;
    --text-feature-headline-h1-in-row-1-h2-in-rows-2-4-size: 22px;
    --text-feature-body-size: 16px;
    --text-announcement-line-size: 16px;
    --text-announcement-button-size: 16px;
    --text-feature-button-size: 14px;
    --text-footnote-size: 13px;
    --text-footer-column-heading-size: 16px;
  }
}
.button-outline-on-green {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 35px; padding: 0 16px; border-radius: 50px;
  background: transparent; color: #FFFFFF;
  box-shadow: inset 0 0 0 1px #FFFFFF;
  font: 600 16px/1 var(--font-body);
}
.button-announcement {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 41px; padding: 0 12px; border-radius: 50px;
  background: #006242; color: #FFFFFF;
  box-shadow: inset 0 0 0 2px #FFFFFF;
  font: 400 19px/1 var(--font-body);
}
.button-outline-nav {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 33px; padding: 0 16px; border-radius: 50px;
  background: #FFFFFF; color: #212121;
  box-shadow: inset 0 0 0 1px #212121;
  font: 600 14px/1 var(--font-body);
}
.button-filled-nav {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 33px; padding: 0 16px; border-radius: 50px;
  background: #000000; color: #FFFFFF;
  box-shadow: inset 0 0 0 1px #000000;
  font: 600 14px/1 var(--font-body);
}