:root {
  --main: #177A78;
  --main-dark: #136664;
  --main-light: rgba(23,122,120,.12);
  --main-shadow: rgba(23,122,120,.3);

  --secondary: #4AB9B4;

  --dark: #0B2858;

  --surface: #FFFFFF;

  --background: #FBFAF7;
  --main-background: #FBFAF7;
  --muted-background: #EEF5F4;

  --border: #E3E1EC;

  --main-text: #0B2858;
  --muted-text: #53606A;
  --light-text: #FBFAF7;
  --secondary-text: #258F8C;

  --danger: #B83C3C;
  --danger-shadow: rgba(184,60,60,.15);

  --success: #2DBE6C;
  --success-shadow: rgba(45,190,108,.15);

  --warning: #E8C547;
  --warning-shadow: rgba(232,197,71,.15);

  --star: #F59E0B;

  /* Storefront brand tokens consumed by css/*.css (derived from the theme above) */
  --navy: var(--dark);
  --navy-deep: color-mix(in srgb, var(--dark) 62%, #000);
  --brand: var(--main);
  --brand-hover: var(--main-dark);
  --teal: var(--secondary-text);
  --teal-bright: var(--secondary);
  --teal-soft: color-mix(in srgb, var(--secondary) 16%, #fff);
  --mint: var(--muted-background);
  --coral: var(--danger);
  --cream: var(--background);
  --muted: var(--muted-text);
  --gold: var(--star);
  --buy: var(--success);
  --buy-border: color-mix(in srgb, var(--success) 86%, #000);
  --buy-shadow: 0 4px 12px color-mix(in srgb, var(--success) 35%, transparent);
  --font-display: "Playfair Display", Georgia, serif;
  --font-sans: Archivo, system-ui, sans-serif;
}