/* Design tokens de Pitma BR. Única fuente de colores, tipografía y espaciado. */
:root {
  /* Superficies oscuras */
  --color-bg: #12121a;
  --color-bg-alt: #1b1b25;
  --color-surface: #23232e;

  /* Dorados */
  --color-gold-light: #f7dc7a;
  --color-gold: #d4a83c;
  --color-gold-dark: #a37a2c;
  --color-gold-text: #8a6119; /* texto dorado sobre blanco (contraste ~5.9:1) */

  /* Texto */
  --color-text: #ffffff;
  --color-text-muted: #b8b3a6;
  --color-ink: #1a1a22;
  --color-paper: #ffffff;
  --color-ink-muted: #55555f; /* texto secundario sobre blanco (contraste ~7:1) */
  --color-gold-line: rgba(212, 168, 60, 0.35); /* filetes y bordes finos */

  /* Tipografía */
  --font-accent: "Great Vibes", cursive;
  --font-heading: "Marcellus", Georgia, serif;
  --font-body: "Montserrat", system-ui, sans-serif;

  /* Espaciado (escala en rem) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Radios y sombras */
  --radius-sm: 2px;
  --radius-md: 6px;
  --shadow-card: 0 6px 18px rgba(0, 0, 0, 0.25);

  /* Referencia de breakpoints (las media queries no aceptan var();
     usar estos mismos valores literales: 48rem = 768px, 75rem = 1200px) */
  --bp-md: 48rem;
  --bp-lg: 75rem;
}