@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
/* ============================================================
   ESTILOS.CSS.PHP
   Colores de marca  -> por cliente (brand.php / site_settings)
   Tokens de estilo  -> por TEMA activo (temas_config.php)
   ============================================================ */
:root {
  /* ---- Marca (no cambia con el tema) ---- */
  --color-primario:       #00D4FF;
  --color-primario-hover: #00B8E6;
  --color-glow:           #00D4FF4D;
  --color-glow-soft:      #00D4FF1A;
  --color-header-bg:      #0A1628;
  --color-header-bg2:     #162238;

  --bg-primary:   #FFFFFF;
  --bg-secondary: #F8FAFB;
  --bg-card:      #FFFFFF;
  --bg-hover:     #F0F4F7;
  --text-primary:   #1A1D29;
  --text-secondary: #6B7280;
  --text-muted:     #9CA3AF;
  --border-normal: #E5E7EB;
  --border-light:  rgba(0, 0, 0, 0.08);

  /* ---- TOKENS DE TEMA (esto es lo que cambia al elegir otro tema) ---- */

  /* Radios */
  --radio-xs:   2px;
  --radio-sm:   4px;
  --radio-md:   6px;
  --radio-lg:   8px;
  --radio-pill: 8px;

  /* Tipografía */
  --font-titulos:     'Schibsted Grotesk', 'Segoe UI', Arial, sans-serif;
  --font-cuerpo:      'Inter', 'Segoe UI', Arial, sans-serif;
  --peso-titulo:      800;
  --peso-cuerpo:      400;
  --tam-base:         15px;
  --escala-h1:        2.2rem;
  --escala-h2:        1.6rem;
  --escala-h3:        1.05rem;
  --alto-linea:       1.6;
  --tracking-titulo:  -.025em;
  --transform-titulo: none;

  /* Bordes y sombras */
  --borde-ancho: 0px;
  --sombra-sm: 0 0 0 0 transparent;
  --sombra-md: 0 0 0 0 transparent;
  --sombra-lg: 0 0 0 0 transparent;

  /* Acento + sombra en una sola declaración, lista para usar en tarjetas */
  --card-sombra: inset var(--card-acento-izq) 0 0 0 var(--color-primario),
                 inset 0 var(--card-acento-sup) 0 0 var(--color-primario),
                 var(--sombra-sm);

  /* Espaciado / densidad */
  --pad-card:      22px;
  --pad-item:      8px 11px;
  --pad-btn:       12px 20px;
  --pad-input:     11px 14px;
  --gap:           10px;
  --margen-bloque: 18px;

  /* Botones (derivados de btn_estilo: relleno) */
  --btn-bg:          var(--color-primario);
  --btn-color:       #fff;
  --btn-borde-color: var(--color-primario);
  --btn-bg-hover:    var(--color-primario-hover);
  --btn-color-hover: #fff;
  --btn-peso:        600;
  --btn-transform:   none;
  --btn-tracking:    0;

  /* Acentos de superficie (card_acento: none) */
  --card-acento-izq: 0px;
  --card-acento-sup: 0px;
  --item-acento:     3px;

  /* Movimiento */
  --transicion:  .3s;
  --hover-lift:  0px;
  --hover-slide: 3px;

  /* Alias viejos, para no romper CSS que todavía los use */
  --shadow-sm: var(--sombra-sm);
  --shadow-md: var(--sombra-md);
  --shadow-lg: var(--sombra-lg);
}

/* Los títulos toman tipografía, peso, tracking y caja del tema en TODO el sitio */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-titulos);
  font-weight: var(--peso-titulo);
  letter-spacing: var(--tracking-titulo);
  text-transform: var(--transform-titulo);
}