:root{
  color-scheme: light;

  /* Core palette */
  --navy-900:#061529;      /* hero backdrop */
  --navy-800:#0A2043;      /* announcement bar, stat band */
  --navy-700:#0E2B57;      /* dark cards */
  --brand-700:#0A3F86;
  --brand-600:#0B57B8;     /* primary button */
  --brand-500:#1268D6;     /* links / active */
  --brand-300:#7FB2EC;
  --teal-500:#18A9BE;      /* logo accent */
  --teal-600:#029FAC;      /* announcement bar */
  --green-500:#2DBE7E;     /* logo accent + cart badge */

  /* Surfaces */
  --bg:#FFFFFF;
  --surface-tint:#F2F7FE;  /* pale section wash */
  --surface-card:#E8F1FD;  /* product tile field */
  --surface-soft:#F7FAFE;
  --line:#DFE8F4;
  --line-strong:#C6D6EA;

  /* Ink */
  --ink:#0C1A2B;
  --ink-2:#31465E;
  --muted:#617388;  /* 4.87 on white, 4.52 on --surface-tint */
  --on-dark:#FFFFFF;
  --on-dark-muted:#AEC3DC;

  /* Flagged placeholder */
  --ph:#B4700C;
  --ph-bg:#FFF6E6;
  --ph-line:#F0CB86;

  /* Type */
  --display:'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --text:'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Shape */
  --r-sm:10px;
  --r:14px;
  --r-lg:20px;
  --r-xl:28px;
  --pill:999px;

  --shadow-sm:0 1px 2px rgba(10,32,67,.06), 0 4px 14px rgba(10,32,67,.05);
  --shadow:0 10px 30px rgba(10,32,67,.09);
  --shadow-lg:0 24px 60px rgba(10,32,67,.16);

  --hero-img: url('../img/hero-img.webp');
  --maxw:1220px;
  --gut:24px;
  --header-h:74px;
}