/* Shared foundation. Load before catalog.css and refinement.css. */
:root {
  --ms-navy: #102d48;
  --ms-night: #071d31;
  --ms-ink: #172e42;
  --ms-accent: #007c96;
  --ms-accent-hover: #00667d;
  --ms-brand-gold: #c5a252;
  --ms-brand-gold-hover: #ddbd72;
  --ms-white: #ffffff;
  --ms-surface: #f3f6f7;
  --ms-surface-deep: #eaf0f3;
  --ms-muted: #536775;
  --ms-line: #dbe4e8;
  --ms-font-body: Montserrat, Arial, sans-serif;
  --ms-font-heading: Montserrat, Arial, sans-serif;
  --ms-type-small: .875rem;
  --ms-type-body: 1rem;
  --ms-type-lead: 1.125rem;
  --ms-type-card: clamp(1.125rem, 1.5vw, 1.5rem);
  --ms-type-section: clamp(1.875rem, 3vw, 2.75rem);
  --ms-type-display: clamp(2.5rem, 4.5vw, 4rem);
  --ms-leading-body: 1.65;
  --ms-leading-heading: 1.15;
  --ms-space-1: .25rem;
  --ms-space-2: .5rem;
  --ms-space-3: .75rem;
  --ms-space-4: 1rem;
  --ms-space-5: 1.5rem;
  --ms-space-6: 2rem;
  --ms-space-7: 3rem;
  --ms-space-8: 4rem;
  --ms-space-9: 5.5rem;
  --ms-section-space: clamp(3rem, 6vw, 5.5rem);
  --ms-content-width: 1240px;
  --ms-reading-width: 68ch;
  --ms-gutter: clamp(1.25rem, 3vw, 2.5rem);
  --ms-radius-control: 4px;
  --ms-radius-card: 8px;
  --ms-radius-panel: 12px;
  --ms-shadow-soft: 0 8px 28px rgb(16 45 72 / 6%);
  --ms-shadow-raised: 0 16px 40px rgb(16 45 72 / 10%);
  --ms-ratio-product: 4 / 3;
  --ms-ratio-scene: 3 / 2;
  --ms-ratio-wide: 16 / 9;
  --ms-motion: 180ms ease;
  /* Keep old templates compatible. "gold" historically became teal. */
  --navy: var(--ms-navy);
  --ink: var(--ms-ink);
  --gold: var(--ms-accent);
  --muted: var(--ms-muted);
  --line: var(--ms-line);
  --light: var(--ms-surface);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; color: var(--ms-ink); background: var(--ms-white); font-family: var(--ms-font-body); line-height: var(--ms-leading-body); }
button, input, select, textarea { font: inherit; }
h1, h2, h3, h4, .eyebrow, .desktop-nav { font-family: var(--ms-font-heading); }
h1, h2, h3, h4 { line-height: var(--ms-leading-heading); letter-spacing: -.035em; }
img { max-width: 100%; height: auto; }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--ms-accent); outline-offset: 4px; }
:where(button, input, textarea, select) { accent-color: var(--ms-accent); }
.ms-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--ms-space-3); min-height: 48px; padding: .75rem 1.5rem; border: 1px solid var(--ms-navy); border-radius: var(--ms-radius-control); background: var(--ms-navy); color: var(--ms-white); font-size: var(--ms-type-small); font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color var(--ms-motion), border-color var(--ms-motion); }
.ms-button:hover { background: var(--ms-accent-hover); border-color: var(--ms-accent-hover); }
.ms-button--gold { background: var(--ms-brand-gold); border-color: var(--ms-brand-gold); color: var(--ms-night); }
.ms-button--gold:hover { background: var(--ms-brand-gold-hover); border-color: var(--ms-brand-gold-hover); }
.ms-field { width: 100%; min-width: 0; min-height: 48px; padding: .75rem 1rem; border: 1px solid var(--ms-line); border-radius: var(--ms-radius-control); background: var(--ms-white); color: var(--ms-ink); font-size: 1rem; }
.ms-product-media { aspect-ratio: var(--ms-ratio-product); object-fit: contain; background: var(--ms-surface); }
.ms-scene-media { aspect-ratio: var(--ms-ratio-scene); object-fit: cover; }
@media (prefers-reduced-motion: reduce) { :root { --ms-motion: 0s; } }