/* ===========================================================
   DF CONSULTORES — Sistema de marca · tokens compartidos
   Usar en: styleguide · landing · deck · social
   =========================================================== */
:root{
  /* ---- Color: identidad ---- */
  --burgundy:      #8F1361;  /* Primario. Identidad, titulares de marca, CTA principal, fondos de autoridad */
  --burgundy-700:  #6E0E4B;  /* Hover / estados activos del CTA, sombras tonales */
  --burgundy-900:  #2C0A1F;  /* Tinta profunda para fondos full-bleed oscuros */

  /* ---- Color: acento de acción ---- */
  --champagne:     #E2BA86;  /* Oro viejo. Badges, eyebrows, divisores, acentos de dato, botón secundario */
  --champagne-600: #C99A5E;  /* Champagne sobre blanco cuando hace falta contraste de texto */
  --champagne-100: #F7EEE2;  /* Relleno champagne suave */

  /* ---- Color: apoyo ---- */
  --mauve:         #B683A6;  /* Rosa viejo. Bloques secundarios, ilustración, estados sutiles */
  --mauve-200:     #E7D5E2;  /* Bordes suaves */
  --mauve-100:     #F3EAF0;  /* Fondos secundarios muy suaves */

  /* ---- Color: dirección "Salvia & Ciruela" (versión profunda, aprobada) ---- */
  --ciruela:       #4A1A38;  /* Ciruela oscuro. Compañera profunda del burgundy: titulares, encabezados, totales, fondos 2 tonos */
  --ciruela-900:   #3A1230;  /* Ciruela aún más profundo para fondos full-bleed */
  --salvia:        #8FA37A;  /* Verde salvia. Acentos, líneas divisorias, apoyo fresco */
  --salvia-700:    #5E6E45;  /* Salvia oscuro: bandas secundarias, subtítulos, texto en positivo (AA) */
  --salvia-100:    #EAF0E3;  /* Salvia claro: bandas de rubro/categoría, zebra, badges "al día" (texto ciruela) */

  /* ---- Neutros ---- */
  --white:   #FFFFFF;        /* Fondo principal, espacio negativo */
  --lino:    #FCFBFA;        /* Gris lino: fondo de sección alterno */
  --ink:     #2B2B2B;        /* Texto de cuerpo */
  --muted:   #7A6E76;        /* Texto secundario / captions (gris tintado en burgundy) */
  --line:    #ECE6EA;        /* Divisores netos de 1px */

  /* ---- Tipografía — Dirección "Bricolage · Grotesca expresiva" ---- */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;   /* titulares + marca (heavy) */
  --font-accent: "Newsreader", Georgia, serif;                    /* acento en bastardilla (énfasis) */
  --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; /* cuerpo + datos */
  --fw-display: 800;

  /* Escala tipográfica (px) */
  --fs-display: 76px;
  --fs-h1: 54px;
  --fs-h2: 40px;
  --fs-h3: 30px;
  --fs-h4: 22px;
  --fs-body-lg: 20px;
  --fs-body: 17px;
  --fs-sm: 15px;
  --fs-eyebrow: 13px;

  /* ---- Spacing (escala de 4) ---- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 96px;  --sp-10: 128px;

  /* ---- Radios ---- */
  --r-sm: 6px;   --r-md: 12px;  --r-lg: 20px;  --r-pill: 999px;

  /* ---- Elevación (sutil, sin skeuomorfismo) ---- */
  --shadow-sm: 0 1px 2px rgba(44,10,31,.04);
  --shadow-card: 0 18px 48px -28px rgba(143,19,97,.22);

  /* ---- Layout ---- */
  --maxw: 1200px;
}

*{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin:0; background: var(--white); color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body); line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
::selection{ background: var(--champagne); color: var(--burgundy-900); }

/* Foco visible accesible (AA) en toda interacción */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible{
  outline: 3px solid var(--burgundy);
  outline-offset: 3px;
  border-radius: 4px;
}