/* ============================================
   Composición de Teatro Musical — Design Tokens
   Fuente: BRAND_MANUAL.md
   ============================================ */

:root {
  /* ── Paleta principal (60/30/10) ── */
  --bg: #0f2b2f; /* Teal Oscuro  — 60 % fondo */
  --bg-alt: #163538; /* Teal Medio   — secciones alternadas */
  --surface: #1c3f43; /* Teal Claro   — cards, hovers */
  --brand: #e8536a; /* Coral        — 10 % acento */
  --brand-hover: #f06b80; /* Coral Claro  — hover CTAs */
  --brand-muted: rgba(232, 83, 106, 0.15);
  --text: #f5f0eb; /* Blanco Cálido — 30 % texto */
  --text-secondary: #a8b5b7; /* Gris Cálido  — descripciones */
  --border: #2a4f53; /* Teal Borde */

  /* ── Escala brand (opacidad) ── */
  --brand-80: rgba(232, 83, 106, 0.8);
  --brand-60: rgba(232, 83, 106, 0.6);
  --brand-24: rgba(232, 83, 106, 0.24);
  --brand-12: rgba(232, 83, 106, 0.12);

  /* ── Escala text (opacidad) ── */
  --text-80: rgba(245, 240, 235, 0.8);
  --text-60: rgba(245, 240, 235, 0.6);
  --text-40: rgba(245, 240, 235, 0.4);
  --text-12: rgba(245, 240, 235, 0.12);

  /* ── Tipografía ── */
  --font-heading:
    "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial,
    sans-serif;
  --font-body:
    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* ── Espaciado ── */
  --space-xs: 0.5rem; /*  8px */
  --space-sm: 1rem; /* 16px */
  --space-md: 1.5rem; /* 24px */
  --space-lg: 3rem; /* 48px */
  --space-xl: 5rem; /* 80px */
  --space-2xl: 7.5rem; /* 120px */

  /* ── Radios ── */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* ── Sombras ── */
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.15);
  --shadow-elevated: 0 8px 32px rgba(0, 0, 0, 0.25);

  /* ── Transiciones ── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 200ms;
  --duration-normal: 400ms;

  /* ── Layout ── */
  --max-width: 1120px;
  --nav-height: 72px;
}