/* ============================================================
   BODYLOGIC DESIGN TOKENS v9 — referencia: preview-bodylogic-v9
   Reglas del dueño (no negociables):
   - Fondos: blanco #FFFFFF y gris frío muy claro #F7F8FA. CERO crema/café.
   - Texto: grises fríos #1B2024 / #4A525B / #828A93.
   - Naranja #FD8304 SOLO acento (botones, badges, hover, íconos).
   - Bordes #E6E9ED. Estrella de rating #FFB020.
   - Tipografía: Manrope en títulos y cuerpo.
   Única fuente de verdad visual. Siempre var(), nunca hardcode.
   ============================================================ */
:root {
  /* ——— Color: marca (acento, nunca fondo dominante) ——— */
  --bl-brand-500: #FD8304;   /* naranja BodyLogic: CTAs y acentos */
  --bl-brand-600: #E67300;
  --bl-brand-700: #C25F00;
  --bl-brand-400: #FDA03F;
  /* Tintes por transparencia (panel de afiliación, hovers suaves) */
  --bl-tint-10: rgb(253 131 4 / 0.06);
  --bl-tint-20: rgb(253 131 4 / 0.14);
  --bl-tint-40: rgb(253 131 4 / 0.30);
  --bl-brand-50:  var(--bl-tint-10);
  --bl-brand-100: var(--bl-tint-20);

  /* ——— Color: tinta y superficies (GRISES FRÍOS v9) ——— */
  --bl-ink-900: #1B2024;     /* títulos y precios */
  --bl-ink-700: #4A525B;     /* cuerpo */
  --bl-ink-600: #4A525B;
  --bl-ink-400: #828A93;     /* secundario / metadatos */
  --bl-surface-0:  #FFFFFF;
  --bl-surface-50: #F7F8FA;  /* gris frío muy claro para secciones y media */
  --bl-surface-100:#EEF1F4;
  --bl-border:     #E6E9ED;

  /* ——— Color: semánticos ——— */
  --bl-success: #2E7D4F;
  --bl-warning: #FFB020;     /* estrella de rating */
  --bl-danger:  #C0392B;
  --bl-info:    #5B7A99;

  /* ——— Tipografía (Manrope títulos y cuerpo) ——— */
  --bl-font-display: 'Manrope', system-ui, sans-serif;
  --bl-font-text: 'Manrope', system-ui, sans-serif;
  --bl-text-xs: 0.75rem;
  --bl-text-sm: 0.875rem;
  --bl-text-base: 1rem;
  --bl-text-lg: 1.125rem;
  --bl-text-xl: 1.25rem;
  --bl-text-2xl: 1.5rem;
  --bl-text-3xl: 1.875rem;
  --bl-text-4xl: 2.25rem;
  --bl-text-5xl: 3rem;
  --bl-leading-tight: 1.15;
  --bl-leading-base: 1.65;

  /* ——— Espaciado (escala 4px) ——— */
  --bl-space-1: 0.25rem;
  --bl-space-2: 0.5rem;
  --bl-space-3: 0.75rem;
  --bl-space-4: 1rem;
  --bl-space-6: 1.5rem;
  --bl-space-8: 2rem;
  --bl-space-12: 3rem;
  --bl-space-16: 4rem;
  --bl-space-20: 5rem;
  --bl-space-28: 7rem;

  /* ——— Radios ——— */
  --bl-radius-sm: 10px;
  --bl-radius-md: 14px;
  --bl-radius-lg: 20px;
  --bl-radius-xl: 28px;
  --bl-radius-full: 999px;

  /* ——— Sombras (base fría) ——— */
  --bl-shadow-sm: 0 1px 4px rgb(27 32 36 / 0.06);
  --bl-shadow-md: 0 4px 16px rgb(27 32 36 / 0.07);
  --bl-shadow-lg: 0 12px 32px rgb(27 32 36 / 0.10);
  --bl-shadow-brand: 0 6px 18px rgb(253 131 4 / 0.28);

  /* ——— Glass (navbar sobre blanco) ——— */
  --bl-glass-bg: rgb(255 255 255 / 0.94);
  --bl-glass-blur: 10px;

  /* ——— Motion ——— */
  --bl-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --bl-dur-fast: 150ms;
  --bl-dur-base: 250ms;

  /* ——— Layout ——— */
  --bl-container: 1200px;
  --bl-container-narrow: 760px;
}

/* Fondo global blanco; secciones alternan con gris frío claro */
body {
  background: var(--bl-surface-0);
  color: var(--bl-ink-700);
  font-family: var(--bl-font-text);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--bl-font-display);
  color: var(--bl-ink-900);
}