:root {
  --color-background: #ffffff;
  --color-panel: #f2f2f2;
  --color-border: #e5e7eb;
  --color-text: #121212;
  --color-muted: #6b6b6b;
  --color-inverse: #ffffff;
  --color-focus: #003049;
  --color-accent: #003049;
  --color-accent-hover: #004a6e;
  --color-pill-border: #3d3d3d;

  --font-display: "SF Pro Display", "SF Pro Text", Inter, Arial, sans-serif;
  --font-body: Inter, Arial, sans-serif;

  --container-width: 1840px;
  --section-reference-height: 1046px;
  --radius-card: 16px;
  --radius-control: 12px;
  --radius-footer: 12px;

  --space-edge: 40px;
  --space-grid: 16px;
  --catalog-safe-left: calc(var(--space-edge) + 58px);

  --shadow-soft: 0 20px 60px rgb(0 0 0 / 0.22);
  --transition-duration: 1150ms;
  --video-reveal-duration: 1100ms;
  --transition-fast: 240ms;
  --category-transition-duration: 360ms;
  --transition-easing: cubic-bezier(0.76, 0, 0.24, 1);
  --transition-soft: cubic-bezier(0.22, 1, 0.36, 1);
}

@font-face {
  font-family: "SF Pro Display";
  src: local("SF Pro Display"), local(".SFNS-Display"), local("SFProDisplay-Regular");
  font-weight: 400 700;
  font-display: swap;
}