/* ==========================================================================
   EnBlanco Design · tokens del sistema (demo Fase 1)
   Fuente de verdad: DESIGN.md. Paleta confirmada contra el kit real de
   Elementor (post-599.css) en docs/diagnostico.md §2.
   ========================================================================== */

:root {
  /* ---- Paleta oficial (sin derivados fuera de manual salvo transparencias) */
  --c-terracota: #B8472A;   /* acento: ≤ 10 % de la superficie */
  --c-tinta:     #111111;   /* Negro Tinta: texto y secciones oscuras */
  --c-blanco:    #FFFFFF;
  --c-hueso:     #F5F2EC;   /* fondo claro principal */
  --c-arena:     #E9DCC9;   /* fondo cálido / texto suave sobre oscuro */
  --c-grafito:   #5A5A5A;   /* texto secundario sobre claro */

  /* Variantes por transparencia o mezcla (no son colores nuevos de marca) */
  --c-terracota-press: color-mix(in srgb, var(--c-terracota) 86%, var(--c-tinta));
  --c-tinta-2:   color-mix(in srgb, var(--c-tinta) 94%, var(--c-blanco)); /* tarjetas sobre oscuro */
  --c-line-light: rgba(17, 17, 17, .12);
  --c-line-dark:  rgba(233, 220, 201, .16);

  /* ---- Roles semánticos (tema claro por defecto; [data-theme="dark"] los cambia) */
  --bg:        var(--c-hueso);
  --surface:   var(--c-blanco);
  --text:      var(--c-tinta);
  --text-soft: var(--c-grafito);
  --line:      var(--c-line-light);
  --accent:    var(--c-terracota);
  --on-accent: var(--c-blanco);
  --focus:     var(--c-terracota);

  /* ---- Tipografía */
  --font-display: "Outfit", "Inter", system-ui, sans-serif;
  --font-text:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Escala de 6 pasos, fluida entre 390 px y 1440 px. Mínimo absoluto 13 px. */
  --fs-1: 0.8125rem;                                   /* 13 px · etiquetas, notas      */
  --fs-2: 0.9375rem;                                   /* 15 px · UI, nav, botones      */
  --fs-3: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);     /* 16–18 · texto                 */
  --fs-4: clamp(1.25rem, 1.05rem + 0.85vw, 1.875rem);  /* 20–30 · h3, entradillas       */
  --fs-5: clamp(2.25rem, 1.45rem + 3.4vw, 4.5rem);     /* 36–72 · h2                    */
  --fs-6: clamp(2.75rem, 1.2rem + 6.6vw, 7.5rem);      /* 44–120 · h1 / display         */

  --lh-tight: 1;      /* display */
  --lh-title: 1.08;   /* h2, h3 */
  --lh-text:  1.6;
  --ls-display: -0.035em;
  --ls-title:   -0.02em;
  --ls-label:    0.02em;

  --fw-text: 400;
  --fw-medium: 500;
  --fw-strong: 600;
  --fw-title: 600;
  --fw-display: 700;

  --measure: 62ch;

  /* ---- Espaciado: base 8 px */
  --s-05: 4px;
  --s-1:  8px;
  --s-2:  16px;
  --s-3:  24px;
  --s-4:  32px;
  --s-5:  48px;
  --s-6:  64px;
  --s-7:  96px;
  --s-8:  128px;
  --section-pad: clamp(var(--s-7), 6vw + 40px, var(--s-8) + 32px); /* 96–160 */

  /* ---- Grid editorial de 12 columnas */
  --container: 1280px;
  --page-pad: clamp(16px, 4vw, 48px);   /* margen lateral: 16 px en teléfono */
  --grid-cols: 12;
  --gutter: clamp(12px, 1.6vw, 24px);

  /* ---- Radios */
  --r-xs: 6px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-bento: 24px;
  --r-pill: 999px;

  /* ---- Sombras discretas (tono cálido, como la tarjeta real del formulario) */
  --shadow-1: 0 1px 2px rgba(17, 17, 17, .05), 0 6px 16px rgba(60, 30, 15, .06);
  --shadow-2: 0 2px 4px rgba(17, 17, 17, .05), 0 18px 40px rgba(60, 30, 15, .10);
  --shadow-3: 0 4px 8px rgba(17, 17, 17, .06), 0 32px 64px rgba(60, 30, 15, .14);

  /* ---- Movimiento (reglas Emil Kowalski) */
  --ease-out:    cubic-bezier(.23, 1, .32, 1);   /* entradas y respuesta a la persona */
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);  /* algo que ya está en pantalla se mueve */
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);   /* paneles y menú móvil */
  --dur-press: 120ms;   /* :active */
  --dur-fast:  160ms;   /* hover, color */
  --dur-ui:    220ms;   /* desplegable, conmutadores */
  --dur-panel: 280ms;   /* menú móvil (techo de UI: 300 ms) */
  --dur-reveal: 640ms;  /* entrada por scroll (no es UI de interacción) */
  --stagger: 40ms;
  --press-scale: .97;

  /* ---- Capas */
  --z-header: 50;
  --z-menu: 40;
  --z-toast: 60;

  --header-h: 72px;        /* alto reservado del header flotante */
  --tap-min: 44px;         /* objetivo táctil mínimo */
}

/* Tema oscuro por sección: <section data-theme="dark"> */
[data-theme="dark"] {
  --bg:        var(--c-tinta);
  --surface:   var(--c-tinta-2);
  --text:      var(--c-blanco);
  --text-soft: var(--c-arena);
  --line:      var(--c-line-dark);
  --focus:     var(--c-arena);
}

[data-theme="arena"] {
  --bg:      var(--c-arena);
  --surface: var(--c-blanco);
}

[data-theme="white"] {
  --bg:      var(--c-blanco);
  --surface: var(--c-hueso);
}

@media (max-width: 559px) {
  :root { --header-h: 64px; }
}