:root {
  --red-50: #FFF1F2;
  --red-100: #FFE4E6;
  --red-500: #EF2A2F;
  --red-600: #DC1F26;
  --red-700: #B91C1C;

  --ink-950: #07111F;
  --ink-900: #0B1220;
  --ink-800: #111827;
  --ink-700: #1F2937;
  --ink-600: #4B5563;
  --ink-500: #6B7280;

  --surface: #FFFFFF;
  --surface-soft: #F8FAFC;
  --surface-tint: #EEF2F7;
  --border: #E5E7EB;
  --border-strong: #CBD5E1;

  /* Navy — shared with the application shell (frontend/src/index.css @theme). */
  --navy-900: #081321;
  --navy-800: #0E1E33;
  --navy-700: #17293F;
  --navy-600: #263A52;
  --navy-300: #7E93AB;
  --navy-100: #C9D6E4;
  --surface-dark: #081321;

  /* Aliases used by the product-shot caption. */
  --ink: #07111F;
  --muted: #6B7280;

  --success: #16A34A;
  --warning: #F59E0B;
  --info: #2563EB;

  --shadow-sm: 0 1px 2px rgba(7, 17, 31, .05);
  --shadow-md: 0 10px 30px rgba(7, 17, 31, .08);
  --shadow-lg: 0 24px 70px rgba(7, 17, 31, .12);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;

  --container: 1200px;
  --section-y: 96px;

  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@media (max-width: 900px) {
  :root { --section-y: 72px; }
}

@media (max-width: 640px) {
  :root { --section-y: 56px; }
}