:root {
  color-scheme: light;
  --navy: #102d46;
  --navy-dark: #082238;
  --accent: #e1361e;
  --accent-action: #d8321c;
  --accent-dark: #b92c18;
  --accent-soft: #fff1ed;
  --background: #f5f7f8;
  --surface: #fff;
  --text: #14202b;
  --muted: #5d6872;
  --line: #dce2e7;
  /* One typography stack across the storefront. Segoe UI is the same primary font
     already used by the order-summary labels and has full Vietnamese support. */
  --font-ui: 'Segoe UI', Arial, sans-serif;
  --font-body: var(--font-ui);
  --font-display: var(--font-ui);
  --font-mono: var(--font-ui);
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --radius-sm: 4px;
  --radius: 8px;
  --container-width: 1200px;
  --page-gutter: clamp(16px, 4vw, 48px);
  --header-height: 84px;
  --shadow: 0 8px 28px rgb(8 34 56 / 7%);
}