/* ============================================
   Los Repertoristas — Design Tokens v1
   Fuente: manual de marca v1
   ============================================ */

:root {
  /* ── Paleta principal (60/30/10) ── */
  --lr-bg: #fafafa; /* Blanco Frío — 60 % */
  --lr-ink: #111111; /* Negro Carbón — 30 % */
  --lr-brand: #14836e; /* Verde Atril — 10 % */

  /* ── Escala ink (opacidad) ── */
  --lr-ink-80: rgba(17, 17, 17, 0.8);
  --lr-ink-60: rgba(17, 17, 17, 0.6);
  --lr-ink-40: rgba(17, 17, 17, 0.4);
  --lr-ink-24: rgba(17, 17, 17, 0.24);
  --lr-ink-12: rgba(17, 17, 17, 0.12);
  --lr-ink-08: rgba(17, 17, 17, 0.08);
  --lr-ink-04: rgba(17, 17, 17, 0.04);

  /* ── Escala brand (opacidad) ── */
  --lr-brand-80: rgba(20, 131, 110, 0.8);
  --lr-brand-60: rgba(20, 131, 110, 0.6);
  --lr-brand-24: rgba(20, 131, 110, 0.24);
  --lr-brand-12: rgba(20, 131, 110, 0.12);

  /* ── Tipografía ── */
  --font-heading:
    "IBM Plex Sans Condensed", system-ui, -apple-system, Segoe UI, Roboto,
    Arial, sans-serif;
  --font-body:
    "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial,
    sans-serif;

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

  /* ── Radios ── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* ── Sombras ── */
  --shadow-card: 0 2px 12px var(--lr-ink-08);
  --shadow-elevated: 0 8px 32px var(--lr-ink-12);

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

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