:root {
  --navy: #0A1F33;
  --navy-soft: #122A42;
  --navy-deep: #061525;
  --seafoam: #3D8B7A;
  --seafoam-light: #4FA08E;
  --seafoam-muted: rgba(61, 139, 122, 0.18);
  --white: #F7FAFC;
  --white-dim: rgba(247, 250, 252, 0.72);
  --mist: #E8EEF2;
  --mist-dark: #D4DEE6;
  --text: #0A1F33;
  --text-muted: rgba(10, 31, 51, 0.62);
  --text-on-dark: rgba(247, 250, 252, 0.88);
  --text-on-dark-muted: rgba(247, 250, 252, 0.55);

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Manrope', system-ui, -apple-system, sans-serif;

  --header-h: 4.5rem;
  --drawer-w: min(22rem, 88vw);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;

  --shadow-soft: 0 1.5rem 4rem rgba(10, 31, 51, 0.12);
  --shadow-panel: 0 2rem 5rem rgba(6, 21, 37, 0.28);

  --panel-w: clamp(18rem, 42vw, 28rem);
  --panel-gap: clamp(1rem, 2vw, 1.75rem);
}