/* FACOMERCAI BRANDING TOKENS v2 — azul pastel premium, elevado a la vara Community/Rides
   ADITIVO: tokens.css v1 sigue funcionando; v2 añade profundidad. Cargar v2 DESPUÉS de v1 (o solo v2: incluye todo).
   Técnica madre (de Rides): re-tintar la marca = cambiar SOLO el bloque ACCENT. */
:root {
  /* ===== ACCENT (lo único que se toca por cliente) ===== */
  --accent:        #5B8DEF;   /* primario FACOMERCAI */
  --accent-deep:   #3D6FD6;   /* hover/activo */
  --accent-bright: #7FA8F5;   /* highlights */
  --accent-glow:   rgba(91,141,239,.35);
  --accent-tint:   #EAF2FE;   /* panel suave */
  --accent-tint2:  #F4F8FF;   /* lavado de sección */

  /* ===== INK (texto en 4 niveles — navy, nunca negro puro) ===== */
  --ink:   #0A1A33;   /* títulos */
  --body:  #3C4A60;   /* cuerpo */
  --muted: #6B7890;   /* secundario */
  --faint: #9AA6BC;   /* captions */

  /* ===== SUPERFICIES ===== */
  --bg:        #F7FAFD;
  --paper:     #FBFCFE;
  --surface:   #FFFFFF;
  --line:      #E4EAF3;
  --line-soft: #EFF3FA;

  /* ===== SEMÁNTICOS (tacañería: trust solo para verificado/éxito) ===== */
  --trust:      #0E9F6E;  --trust-tint: #E7F7F0;
  --warn:       #B07A1F;  --warn-tint:  #FDF3E3;
  --danger:     #C25E5E;  --danger-tint:#FBEAEA;
  --warm:       #F4B860;  /* SOLO precios/ofertas */

  /* ===== RADIOS (escala fija) ===== */
  --r-sm: 10px;  --r: 16px;  --r-lg: 22px;  --r-xl: 28px;

  /* ===== SOMBRAS (3 niveles, en capas, color ink — prohibida la sombra gris genérica) ===== */
  --shadow-sm: 0 1px 2px rgba(10,26,51,.05), 0 1px 3px rgba(10,26,51,.04);
  --shadow:    0 4px 14px rgba(10,26,51,.07), 0 1px 3px rgba(10,26,51,.05);
  --shadow-lg: 0 24px 60px -20px rgba(31,71,143,.28), 0 8px 24px -12px rgba(10,26,51,.12);
  --ring:      0 0 0 4px rgba(91,141,239,.14);

  /* ===== TIPOGRAFÍA (par display + UI; mono para números/IDs) ===== */
  --font:    "Manrope", "Inter", system-ui, -apple-system, sans-serif;
  --display: "Hanken Grotesk", "Manrope", system-ui, sans-serif;
  --mono:    "Space Mono", ui-monospace, monospace;
  --fs-h1: 44px; --fs-h2: 32px; --fs-body: 16px; --lh: 1.6;

  /* ===== LAYOUT ===== */
  --maxw: 1180px;  --section-pad: 88px;  --card-pad: 28px;

  /* ===== COMPAT v1 (alias — no romper mocks existentes) ===== */
  --pastel: var(--accent-bright);
  --cta:    var(--accent);
  --deep:   var(--ink);
  --text:   var(--body);
  --ok:     var(--trust);
  --radius: var(--r); --radius-lg: var(--r-lg);
  --shadow-cta: 0 6px 18px var(--accent-glow);
}

/* ===== PATRONES RESPONSIVE OFICIALES (los 3 únicos) =====
   1. PÚBLICO: grids colapsan + hamburger <940px
   2. DASHBOARD: sidebar → bottom tab bar <900px
   3. APP: phone-frame (390px) centrado en desktop, edge-to-edge en móvil */

/* ===== BILINGÜE ESTRUCTURAL (técnica Rides) =====
   <span data-es="Reserva tu cita" data-en="Book your appointment"></span>
   JS: document.querySelectorAll('[data-es]').forEach(n=>n.textContent=n.dataset[lang]);
   lang persiste en localStorage ('fc_lang'). */

/* ===== REGLAS DURAS =====
   - Fondos oscuros: solo sidebars/topbars de dashboards y tier premium aprobado. Páginas públicas SIEMPRE claras.
   - --warm solo en precios/ofertas. --trust solo en verificado/éxito.
   - Máx 2 emojis por sección. Sin imágenes IA evidentes.
   - Todo asset pasa el checklist de DESIGN_DNA_PREMIUM antes de "listo". */