:root {
  
  --navy-primary: #0A2A52;   
  --navy-deep:    #061B38;   
  --navy-night:   #061B38;   
  --navy-text:    #0A1F3D;   
  --navy-soft:    #1A3D6B;   

  --white:        #FFFFFF;
  --paper:        #E9EEF4;   
  --paper-2:      #DEE5EE;   
  --paper-3:      #F4F7FA;   
  --hairline:     #C9D2DE;   
  --hairline-soft:#DCE3EC;
  --hairline-strong:#A8B5C7;
  --muted:        #51607A;   
  --muted-2:      #6B7A93;   
  --black:        #0A0F1F;

  --accent:        #1D4F8C;
  --accent-hover:  #0A2A52;
  --accent-deep:   #061B38;
  --accent-soft:   #C5D4E8;
  --accent-glow:   rgba(29, 79, 140, 0.22);

  --accent-light:    #7691B5;
  --accent-light-2:  #B7C9E0;

  --in-stock:    #2F7A50;
  --warn:        #B8741A;

  --font-display: 'Fraunces', 'Iowan Old Style', 'Charter', 'Georgia', serif;
  --font-body:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-eyebrow: 0.6875rem;
  --fs-tag:     0.625rem;
  --fs-meta:    0.75rem;       
  --fs-body:    1rem;
  --fs-lede:    clamp(1.0625rem, 0.95rem + 0.45vw, 1.1875rem);
  --fs-h6:      0.8125rem;
  --fs-h5:      0.9375rem;
  --fs-h4:      clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
  --fs-h3:      clamp(1.3125rem, 1.1rem + 0.7vw, 1.625rem);
  --fs-h2:      clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem);
  --fs-h1:      clamp(2rem, 1.45rem + 2.4vw, 3.125rem);
  --fs-h0:      clamp(2.375rem, 1.6rem + 3.6vw, 4rem);

  --ls-display:  -0.018em;
  --ls-display-tight: -0.025em;
  --ls-eyebrow:   0.12em;
  --ls-tag:       0.06em;
  --ls-mono:      0.02em;
  --ls-body:      0;

  --lh-display: 1.1;
  --lh-h2:      1.15;
  --lh-h3:      1.2;
  --lh-body:    1.55;
  --lh-tight:   1.18;

  --container:        1280px;
  --container-wide:   1440px;
  --container-narrow: 820px;
  --gutter:           clamp(1rem, 0.5rem + 2vw, 2.25rem);
  --gutter-sm:        clamp(0.75rem, 0.5rem + 1vw, 1.25rem);

  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-7: 32px;  --s-8: 40px;
  --s-9: 48px;  --s-10: 56px; --s-11: 72px; --s-12: 96px;
  --s-13: 128px; --s-14: 160px;

  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-4: 12px;
  --r-pill: 999px;

  --bw-hair: 1px;
  --bw-rule: 2px;
  --bw-bold: 3px;

  --sh-card:   0 1px 0 rgba(10, 31, 61, 0.04), 0 1px 2px rgba(10, 31, 61, 0.04);
  --sh-card-h: 0 2px 0 rgba(10, 31, 61, 0.06), 0 6px 20px -8px rgba(10, 31, 61, 0.16);
  --sh-cta:    0 1px 0 rgba(10, 31, 61, 0.08);
  --sh-inset:  inset 0 0 0 1px rgba(255,255,255,0.05);

  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-q:  cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast:  150ms;
  --t-base:  240ms;
  --t-slow:  480ms;
  --t-xslow: 800ms;

  --z-bg:    -1;
  --z-base:   0;
  --z-card:   10;
  --z-nav:    50;
  --z-modal: 100;

  --header-h: 64px;
  --utility-h: 32px;
}

@media (min-width: 880px) {
  :root { --header-h: 72px; }
}

[data-theme="navy"] {
  background: var(--navy-primary);
  color: var(--white);
}