/* ============================================================================
   Bakko Restaurante · tokens-bk2.css
   Sistema visual NUEVO del piloto (sans-serif, estilo Bee/Revolut), AISLADO del
   demo actual (que sigue sobre tokens.css). De brand/02-COLOR_TIPOGRAFIA.md.
   Cambiar de piel = cambiar variables (tenet). Blanco hueso base + rojo Bakko
   primario + acentos pastel por tipo de vino. Radios grandes. Tipografía Urbanist.
   ============================================================================ */
:root {
  /* ── Tipografía: Urbanist (marca + producto). Sin serif. ── */
  --bk2-font: 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  /* ── Color · base (neutros hueso) ── */
  --bk2-bg:        #faf8f5;   /* blanco hueso, fondo principal */
  --bk2-bg-elev:   #ffffff;   /* tarjetas */
  --bk2-bg-sunken: #f1ede6;   /* zonas hundidas, inputs */
  /* Las fotos de botella SIEMPRE se muestran sobre blanco (decisión del owner, 2026-10-25):
     así da igual que la foto sea transparente o con fondo blanco. Se exige al subirlas. */
  --bk2-photo-bg:  #ffffff;
  --bk2-photo-line: #ece7df;
  --bk2-ink:       #1c1917;   /* texto principal, casi negro cálido */
  --bk2-ink-soft:  #6b6560;   /* secundario */
  --bk2-ink-faint: #a8a09a;   /* terciario / placeholders */
  --bk2-line:      #e8e2d8;   /* bordes sutiles */

  /* ── Color · primario (rojo Bakko, reutilizado — NO se inventa) ── */
  --bk2-accent:      #8c2f2a;
  --bk2-accent-ink:  #fff7f0;
  --bk2-accent-soft: #f5e2dd;
  --bk2-accent-deep: #6f231f;  /* hover / sombra del rojo */

  /* ── Color · oscuro (para secciones hero/ecosistema sobre fondo oscuro) ── */
  --bk2-dark:      #171311;   /* casi-negro cálido (fondo de sección oscura) */
  --bk2-dark-elev: #211b18;
  --bk2-on-dark:   #faf5ee;   /* texto sobre oscuro */
  --bk2-on-dark-soft: #c9beb4;

  /* ── Acentos por tipo de vino (pastel de fondo + saturado de texto) ── */
  --bk2-tinto-bg:     #f7e4e1;  --bk2-tinto-ink:     #8c2f2a;
  --bk2-blanco-bg:    #f6f1de;  --bk2-blanco-ink:    #a68a2e;
  --bk2-rosado-bg:    #fbe6ea;  --bk2-rosado-ink:    #c25f6e;
  --bk2-espumoso-bg:  #f4efd9;  --bk2-espumoso-ink:  #a88a2e;
  --bk2-dulce-bg:     #f7e9d6;  --bk2-dulce-ink:     #a8672e;

  /* ── Semántico ── */
  --bk2-ok:     #4f7a52;
  --bk2-warn:   #b06a2c;
  --bk2-danger: #a33028;

  /* ── Forma: radios grandes, pills, sombras suaves ── */
  --bk2-r-s:    12px;
  --bk2-r-m:    20px;   /* tarjetas */
  --bk2-r-l:    28px;
  --bk2-r-pill: 9999px;
  --bk2-shadow:    0 1px 2px rgba(60,40,30,.05), 0 10px 30px rgba(60,40,30,.07);
  --bk2-shadow-lg: 0 4px 12px rgba(60,40,30,.08), 0 24px 60px rgba(60,40,30,.12);

  /* ── Espaciado / layout ── */
  --bk2-maxw: 1120px;         /* ancho de contenido en secciones */
  --bk2-pad:  clamp(20px, 5vw, 64px);
  --bk2-ease: cubic-bezier(.22, 1, .36, 1);

  /* ── Escala tipográfica fluida ── */
  --bk2-fs-hero:    clamp(2.6rem, 7vw, 5.2rem);   /* titular hero */
  --bk2-fs-h2:      clamp(1.9rem, 4.2vw, 3.2rem); /* titulares de sección */
  --bk2-fs-h3:      clamp(1.2rem, 2.2vw, 1.6rem);
  --bk2-fs-lead:    clamp(1.05rem, 1.6vw, 1.3rem);/* subtítulos / lead */
  --bk2-fs-body:    1.0625rem;
  --bk2-fs-small:   0.875rem;
}