/* Uber brand tokens, from unfairly.ai/brand-guidelines/uber (checked 2026-10-29).
   Sizes, spacing and components were measured on https://www.uber.com/us/en/ (computed styles, bounding boxes and hover/focus states at 1440 and 390 in headless Chromium, 2026-10-29; images downloaded from their original tb-static.uber.com files).
   Fonts: --font-* use the open stand-ins (load them from Google Fonts); --font-*-original name Uber's own faces, which you may only use if you have a licence. */
:root {
  --color-paper: #FFFFFF;
  --color-surface: #F6F6F6;
  --color-ink: #000000;
  --color-ink-muted: #4A4A4A;
  --color-accent: #FFFFFF;
  --color-on-accent: #000000;
  --color-accent-secondary: #06C167;
  --color-night: #000000;
  --color-on-night: #FFFFFF;
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-uber-eats-green: #06C167;
  --color-card-grey: #292929;
  --color-nav-pill: #111111;
  --color-pill-text: #FCFCFC;
  --color-field-grey: #F6F6F6;
  --color-pill-grey: #EFEFEF;
  --color-hover-grey: #E2E2E2;
  --color-disabled-grey: #E0E0E0;
  --color-disabled-chevron: #C4C4C4;
  --color-placeholder: #4A4A4A;
  --color-underline-track: #CBCBCB;
  --color-legal-grey: #AFAFAF;
  --color-focus-blue: #276EF1;
  --color-earn-blue: #276EF1;
  --color-button-primary-on-dark-fill: #FFFFFF;
  --color-button-primary-on-dark-text: #000000;
  --color-button-primary-on-light-fill: #000000;
  --color-button-primary-on-light-text: #FFFFFF;
  --color-nav-pill-fill: #111111;
  --color-nav-pill-text: #FCFCFC;
  --color-nav-signup-fill: #FFFFFF;
  --color-nav-signup-text: #000000;
  --color-time-pill-fill: #EFEFEF;
  --color-time-pill-text: #111111;
  --color-light-pill-fill: #F6F6F6;
  --color-light-pill-text: #111111;
  --color-field-fill: #F6F6F6;
  --color-field-text: #4A4A4A;
  --color-details-pill-fill: #FFFFFF;
  --color-details-pill-text: #000000;
  --color-explore-card-fill: #292929;
  --color-explore-card-text: #FFFFFF;
  --color-text-link-text: #FFFFFF;
  --color-carousel-button-fill: #F6F6F6;
  --color-carousel-button-text: #111111;
  --color-glass-bar-text: #FFFFFF;
  --color-qr-card-fill: #FFFFFF;
  --color-qr-card-text: #000000;
  --color-social-button-fill: #111111;
  --color-social-button-text: #FCFCFC;
  --color-footer-select-fill: #111111;
  --color-footer-select-text: #FCFCFC;
  --font-display: Outfit, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display-original: "Uber Move", Outfit, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Public Sans", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body-original: "Uber Move Text", "Public Sans", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --page-margin: 144px;
  --section-padding: 64px;
  --container-max: 1152px;
  --card-gap: 18px;
  --nav-height: 64px;
  --grid-gutter: 36px;
  --grid-columns: 12;
  --text-hero-headline-h1-size: 52px;
  --text-hero-headline-h1-line: 1.23;
  --text-hero-headline-h1-weight: 660;
  --text-section-headline-h2-size: 36px;
  --text-section-headline-h2-line: 1.22;
  --text-section-headline-h2-weight: 660;
  --text-qr-card-title-size: 24px;
  --text-qr-card-title-line: 1.33;
  --text-qr-card-title-weight: 660;
  --text-item-title-size: 18px;
  --text-item-title-line: 1.33;
  --text-item-title-weight: 600;
  --text-body-size: 16px;
  --text-body-line: 1.5;
  --text-body-weight: 400;
  --text-button-label-size: 16px;
  --text-button-label-line: 1.25;
  --text-button-label-weight: 600;
  --text-location-label-size: 16px;
  --text-location-label-line: 1.25;
  --text-location-label-weight: 600;
  --text-explore-card-title-size: 16px;
  --text-explore-card-title-line: 1.25;
  --text-explore-card-title-weight: 600;
  --text-explore-card-description-size: 12px;
  --text-explore-card-description-line: 1.67;
  --text-explore-card-description-weight: 400;
  --text-pill-label-size: 14px;
  --text-pill-label-line: 1.14;
  --text-pill-label-weight: 600;
  --text-footer-link-size: 14px;
  --text-footer-link-line: 1.43;
  --text-footer-link-weight: 400;
  --text-legal-size: 12px;
  --text-legal-line: 1.67;
  --text-legal-weight: 400;
  --radius-button-primary-on-dark: 8px;
  --radius-button-primary-on-light: 8px;
  --radius-nav-pill: 999px;
  --radius-nav-signup: 999px;
  --radius-time-pill: 999px;
  --radius-light-pill: 999px;
  --radius-field: 8px;
  --radius-details-pill: 999px;
  --radius-explore-card: 8px;
  --radius-text-link: 0px;
  --radius-carousel-button: 999px;
  --radius-glass-bar: 16px;
  --radius-qr-card: 0px;
  --radius-social-button: 8px;
  --radius-footer-select: 8px;
  --ease-button-press: cubic-bezier(0, 0, 1, 1);
  --duration-button-press: 200ms;
  --ease-link-underline: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-link-underline: 500ms;
  --icon-s: 16px;
  --icon-m: 24px;
}
/* Phone values measured at 390px; Uber's CSS switches at 599px. */
@media (max-width: 599px) {
  :root {
    --page-margin: 24px;
    --section-padding: 40px;
    --text-hero-headline-h1-size: 36px;
    --text-section-headline-h2-size: 28px;
    --text-location-label-size: 14px;
    --text-explore-card-title-size: 12px;
  }
}
.button-primary-on-dark {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 48px; padding: 0 25px; border-radius: 8px;
  background: #FFFFFF; color: #000000;
  font: 600 16px/1 var(--font-body);
}
.button-primary-on-dark:hover { box-shadow: inset 999px 999px 0 rgba(236,236,236,0.15); } /* observed */
.button-primary-on-dark:focus-visible { box-shadow: inset 0 0 0 2px #FCFCFC, 0 0 0 2px #276EF1; } /* observed */
.button-primary-on-light {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 48px; padding: 0 25px; border-radius: 8px;
  background: #000000; color: #FFFFFF;
  font: 600 16px/1 var(--font-body);
}
.button-primary-on-light:hover { box-shadow: inset 999px 999px 0 rgba(236,236,236,0.15); } /* observed */
.button-primary-on-light:focus-visible { box-shadow: inset 0 0 0 2px #FFFFFF, 0 0 0 2px #276EF1; } /* observed */
.carousel-button {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 52px; padding: 0 14px; border-radius: 999px;
  background: #F6F6F6; color: #111111;
  font: 600 14px/1 var(--font-body);
}
.social-button {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 48px; padding: 0 0px; border-radius: 8px;
  background: #111111; color: #FCFCFC;
  font: 400 16px/1 var(--font-body);
}