/* ============================================================
   BM Consulting — Design tokens
   Paleta y tipografía adaptadas del sistema de diseño de marca.
   ============================================================ */

:root {
  /* ---- Marca (núcleo) ---- */
  --brand-navy:  #063358;
  --brand-ink:   #0B2540;
  --brand-steel: #0D4D84;
  --brand-blue:  #1266AC;
  --brand-azure: #19A8E6;
  --brand-mist:  #F2F7FB;

  /* ---- Rampa azure (acentos, hovers, fondos) ---- */
  --azure-50:  #ECF7FD;
  --azure-100: #D2ECFA;
  --azure-200: #A6D8F4;
  --azure-300: #6FBFEC;
  --azure-400: #3F9BD6;
  --azure-500: #19A8E6;
  --azure-600: #1283C2;
  --azure-700: #0D4D84;

  /* ---- Grises neutros (con tinte azulado) ---- */
  --neutral-0:   #FFFFFF;
  --neutral-25:  #F8FAFC;
  --neutral-50:  #F2F7FB;
  --neutral-100: #E8EFF6;
  --neutral-200: #D7E2ED;
  --neutral-300: #BCCBDB;
  --neutral-400: #93A6BC;
  --neutral-500: #6B7F98;
  --neutral-600: #4E6379;
  --neutral-700: #34475C;
  --neutral-800: #1C2F45;
  --neutral-900: #0B2540;

  /* ---- Estado "en vivo" (punto pulsante de disponibilidad) ---- */
  --status-live: #0EA371;

  /* ---- Acentos secuenciales (usados como detalles decorativos, no gráficos) ---- */
  --accent-1: #0D4D84;
  --accent-2: #1266AC;
  --accent-3: #3F9BD6;
  --accent-4: #19A8E6;

  /* ---- Marca de terceros (WhatsApp) ---- */
  --whatsapp-green: #25D366;

  /* ============================================================
     ALIAS SEMÁNTICOS — usar estos en componentes
     ============================================================ */
  --surface-app:    var(--brand-mist);
  --surface-card:   var(--neutral-0);
  --surface-sunken: var(--neutral-50);
  --surface-chrome: var(--brand-ink);
  --surface-inverse:var(--brand-navy);

  --text-strong: var(--neutral-900);
  --text-body:   var(--neutral-800);
  --text-muted:  var(--neutral-500);
  --text-faint:  var(--neutral-400);
  --text-on-brand: #FFFFFF;
  --text-on-chrome: #E8EFF6;
  --text-link:   var(--brand-blue);

  --border-subtle:  var(--neutral-100);
  --border-default: var(--neutral-200);
  --border-strong:  var(--neutral-300);
  --border-chrome:  rgba(255,255,255,0.10);
  --focus-ring:     rgba(25,168,230,0.45);

  --action-primary:       var(--brand-azure);
  --action-primary-hover: #1190CC;
  --action-primary-press: #0F7DB2;
  --action-on-primary:    #FFFFFF;
  --action-secondary-bg:  var(--neutral-0);
  --action-secondary-bd:  var(--neutral-200);

  /* ---- Tipografía ---- */
  --font-sans: "Myriad Pro", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", "Consolas", "Roboto Mono", monospace;

  --weight-regular: 400;
  --weight-bold:    700;

  /* Escala tipográfica (px) */
  --text-hero:  56px;  /* H1 del home */
  --text-h1:    46px;  /* H1 de página interior */
  --text-h2:    40px;  /* H2 de sección */
  --text-h3:    32px;  /* subtítulos grandes / CTA banners */
  --text-h4:    24px;
  --text-h5:    20px;
  --text-h6:    18px;
  --text-stat:  36px;  /* números grandes de estadísticas */
  --text-lg:    17px;  /* párrafos destacados / lead */
  --text-base:  15px;  /* cuerpo */
  --text-sm:    14px;
  --text-xs:    13px;
  --text-2xs:   11px;  /* eyebrows / overlines */

  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-eyebrow: 0.14em;
  --tracking-mono:    0.02em;

  /* ---- Espaciado (base 4px) ---- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 84px;

  /* ---- Radios ---- */
  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px;
  --radius-lg: 14px; --radius-xl: 20px; --radius-2xl: 22px;
  --radius-pill: 999px;

  /* ---- Sombras (tinte navy, nunca gris neutro) ---- */
  --shadow-xs: 0 1px 2px rgba(11,37,64,0.06);
  --shadow-sm: 0 1px 3px rgba(11,37,64,0.08), 0 1px 2px rgba(11,37,64,0.05);
  --shadow-md: 0 10px 30px rgba(11,37,64,0.06);
  --shadow-lg: 0 14px 34px rgba(11,37,64,0.14);
  --shadow-xl: 0 24px 56px rgba(11,37,64,0.18);
  --shadow-focus: 0 0 0 3px var(--focus-ring);

  /* ---- Movimiento ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  /* ---- Layout ---- */
  --maxw-content: 1200px;
  --maxw-narrow: 1080px;
  --header-height: 84px;
}