:root {
  --color-brand: #00756e;
  --color-brand-hover: #00665f;
  --color-link: #00756e;
  --color-brand-strong: var(--color-link);
  --color-brand-strong-hover: #00665f;
  --color-on-brand: #ffffff;
  --color-accent: #3cacb4;
  --color-accent-tint: #d8eef0;
  --color-on-accent: var(--surface-ink);
  --surface-ink: #012d3a;
  --surface-text: #123e43;
  --surface-text-muted: #344f4b;
  --color-ink: var(--surface-ink);
  --color-text: var(--surface-text);
  --color-text-muted: var(--surface-text-muted);
  --color-gold: #d1a548;
  --color-navy: #072a8c;
  --color-pale-blue: #e2f8ff;
  --color-gray: #5d5d5d;
  --color-maroon: #b41328;
  --color-surface: #ffffff;
  --color-surface-cream: #faf6ee;
  --color-surface-pale: #f8fbfb;
  --color-line: #dce9e6;
  --color-focus: var(--color-brand-strong);
  --color-mint: #e9f8f6;
  --color-pdp-bg: #e9f8f6;
  --color-rating: #9a6f0f;
  --color-rating-empty: #627672;
  --color-rating-track: #dce9e6;
  --color-on-brand-muted: var(--surface-ink);
  --color-line-on-brand: rgb(1 45 58 / 0.35);
  --tone-brand-bg: var(--color-accent);
  --tone-brand-fg: var(--surface-ink);
  --tone-brand-focus: var(--surface-ink);
  --tone-brand-fg-hover: #0b4556;
  --tone-brand-accent-text: #ffffff;
  --color-overlay: rgb(1 45 58 / 0.45);

  --font-heading: "Google Sans", "Segoe UI", Arial, sans-serif;
  --font-label: "Google Sans", "Segoe UI", Arial, sans-serif;
  --font-body: "Google Sans", "Segoe UI", Arial, sans-serif;

  --weight-heading: 600;
  --weight-label: 600;
  --weight-body: 400;
  --weight-medium: 500;
  --weight-strong: 700;

  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --shadow-card: 0 8px 24px rgb(1 45 58 / 0.08);
  --shadow-menu: 0 18px 40px rgb(1 45 58 / 0.14);
  --shadow-bar: 0 -8px 24px rgb(1 45 58 / 0.12);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-ui: 0.25s;
  --focus-width: 3px;
  --focus-offset: 2px;
  --z-sticky: 40;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --space-9: 104px;
  --floating-button-clearance: 96px;

  --container-width: 1280px;
  --container-pad: 5%;
  --header-height: 88px;
  --bp-desktop: 1024px;

  --carousel-visible-mobile: 1.3;
  --carousel-visible-tablet: 2.3;
  --carousel-visible-desktop: 4;
  --carousel-gap: var(--space-4);

  --archive-columns-mobile: 2;
  --archive-columns-tablet: 3;
  --archive-columns-desktop: 4;

  --ratio-card: 1 / 1;
  --ratio-learn: 3 / 2;
  --ratio-review-photo: 4 / 3;
  --ratio-why-photo: 3 / 2;
  --measure-width: 44rem;
  --measure-faq: 48rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.5625rem;
  --step-3: 1.953rem;
  --step-4: 2.441rem;
  --step-5: 3.052rem;
  --text-small: 0.875rem;
  --text-label: 0.8125rem;
  --tracking-label: 0.1em;
  --logo-width: 150px;
  --logo-width-mobile: 127px;
  --sticky-bar-height: 80px;
  --sticky-bar-height-note: 104px;
  --star-size: 1.25rem;
  --star-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 6.9 7.5.7-5.7 5 1.8 7.4L12 18l-6.6 4 1.8-7.4-5.7-5 7.5-.7z'/%3E%3C/svg%3E");
  --star-size-large: 1.5rem;
  --rating-slot-height: 1.25rem;
  --card-line: 1.4;
  --stat-min: 9rem;
  --cart-loading-height: 100svh;
  --cart-min-height: 70svh;
  --footer-brand-fr: 1.7fr;
  --footer-last-fr: 1.2fr;
  --ratio-banner-phone: 4 / 3;
  --banner-plain-height: var(--space-5);
  --learn-columns-mobile: 1;
  --learn-columns-tablet: 2;
  --learn-columns-desktop: 3;
  --column-min: 16rem;
  --rating-bar-height: 8px;
  --rating-label-width: 64px;
  --rating-summary-width: 220px;
  --review-photo-size: 72px;
  --review-photo-max-mobile: 220px;
  --search-thumb-size: 48px;
  --search-results-height: 420px;
  --z-dropdown: 5;

  --control-size: 44px;
  --step-title-lines: 2;
  --heading-line: 1.2;
  --page-hero-pad-mobile: var(--space-6);

  --ast-global-color-0: var(--color-brand-strong);
  --ast-global-color-1: var(--color-brand-strong-hover);
  --ast-global-color-2: var(--color-ink);
  --ast-global-color-3: var(--color-text);
}