/* =============================================================================
   Formula Motor — TOKENS
   Fuente de verdad: HANDOFF.md §2. Colores, tipografía, layout, escala de
   espaciado, patrón de rayado y el sistema --fm-accent por categoría.
   Solo variables + base tipográfica mínima. Los componentes van en components.css.
   ============================================================================= */

:root {
  /* --- Paleta (nombres del handoff §2) --- */
  --fm-carbon:        #0a0b0d; /* Negro carbón: header, footer, mastheads, botón primario, títulos */
  --fm-white:         #ffffff; /* Fondo de página */
  --fm-red:           #ea332a; /* Rojo Formula Motor · Nacional · contacto · 404 */
  --fm-blue:          #1756a4; /* Internacional */
  --fm-gray:          #666565; /* Entrevistas · labels secundarios */
  --fm-green:         #00e05a; /* Negocios — SOLO sobre fondo oscuro y en pills */
  --fm-green-legible: #06a94f; /* Verde sobre blanco: breadcrumb, cifras, drop cap */
  --fm-whatsapp:      #25d366; /* Botones de WhatsApp exclusivamente */

  /* Bordes / separadores */
  --fm-border:        #e6e6e4; /* Borde de card, separadores */
  --fm-border-list:   #ececeb; /* Filas de listado mobile */
  --fm-border-input:  #d9d9d7; /* Inputs, botones secundarios */

  /* Texto sobre blanco */
  --fm-text-body:     #1b1d21; /* Párrafos */
  --fm-text-lead:     #3f4247; /* Bajadas, texto secundario */
  --fm-text-excerpt:  #555555; /* Excerpts en cards */
  --fm-text-meta:     #999999; /* Fechas, contadores */

  /* Texto / bordes sobre negro */
  --fm-nav-idle:      #b8babf; /* Nav y footer sobre negro */
  --fm-on-dark:       #a8abb0; /* Párrafos en mastheads */
  --fm-footer-text:   #7d8085; /* Descripción del footer */
  --fm-copyright:     #5c5f64; /* Línea de copyright */
  --fm-border-dark:   #1e2126; /* Divisores dentro de header/footer */
  --fm-control-dark:  #2a2e34; /* Inputs y botones sobre negro */

  /* --- Tipografía (familias) --- */
  --fm-font-head: 'Saira Condensed', 'Arial Narrow', sans-serif;
  --fm-font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --fm-font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* --- Layout (handoff §2) --- */
  --fm-w-content: 1320px; /* Ancho de contenido general */
  --fm-w-article: 1080px; /* Nota y contacto */
  --fm-w-measure: 680px;  /* Medida de lectura */

  --fm-pad-x:        40px; /* Padding lateral desktop */
  --fm-pad-x-mobile: 20px; /* Padding lateral mobile */
  --fm-grid-gap:     28px; /* Gap de grilla desktop */

  --fm-header-h:        92px; /* Header desktop */
  --fm-header-h-mobile: 68px; /* Header mobile */

  --fm-hit-min: 48px;   /* Hit target mínimo mobile */
  --fm-radius-pill: 999px;
  --fm-radius-square: 0; /* cards, inputs y botones cuadrados */

  /* Escala de espaciado: 8 / 12 / 16 / 20 / 26 / 34 / 44 / 56 */
  --fm-s-1: 8px;
  --fm-s-2: 12px;
  --fm-s-3: 16px;
  --fm-s-4: 20px;
  --fm-s-5: 26px;
  --fm-s-6: 34px;
  --fm-s-7: 44px;
  --fm-s-8: 56px;

  /* Breakpoints (referencia; los media queries usan el px literal) */
  --fm-bp-1: 1240px;
  --fm-bp-2: 1024px;
  --fm-bp-3: 767px;

  /* --- Patrón de rayado diagonal (identidad visual, §2) --- */
  /* Base (header): repeating-linear-gradient a 115deg, tramos 46/62/108px */
  --fm-stripe: repeating-linear-gradient(115deg,
    transparent 0 46px,
    rgba(255,255,255,0.035) 46px,
    rgba(255,255,255,0.035) 62px,
    transparent 62px 108px);
  /* Footer: más sutil */
  --fm-stripe-footer: repeating-linear-gradient(115deg,
    transparent 0 58px,
    rgba(255,255,255,0.02) 58px 60px);
}

/* =============================================================================
   SISTEMA DE ACENTO POR CATEGORÍA (handoff §4)
   La clase body.category-<slug> la pone WP en archives; en singles la agrega el
   mu-plugin fm-core. Sirve para masthead, pills, filetes, paginación, drop cap.
   ============================================================================= */
body {
  --fm-accent:      #ea332a; /* default = Nacional/marca */
  --fm-accent-text: #06a94f; /* verde legible por defecto (drop cap, cifras) */
  --fm-accent-soft: #f07a73; /* tint claro para eyebrow de masthead sobre negro */
  --fm-pill-text:   #ffffff;
  --fm-accent-rgb:  234,51,42; /* alimenta el rayado del masthead al 10% */
}
body.category-internacional { --fm-accent: #1756a4; --fm-accent-text: #1756a4; --fm-accent-soft: #6d8fbf; --fm-accent-rgb: 23,86,164; }
body.category-nacional      { --fm-accent: #ea332a; --fm-accent-text: #ea332a; --fm-accent-soft: #f07a73; --fm-accent-rgb: 234,51,42; }
body.category-entrevistas   { --fm-accent: #666565; --fm-accent-text: #666565; --fm-accent-soft: #9a9a9a; --fm-accent-rgb: 102,101,101; }
body.category-negocios      { --fm-accent: #00e05a; --fm-accent-text: #06a94f; --fm-accent-soft: #5fe39a; --fm-pill-text: #0a0b0d; --fm-accent-rgb: 0,224,90; }

/* =============================================================================
   BASE tipográfica mínima (el detalle fino va por componente/widget)
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--fm-font-body);
  color: var(--fm-text-body);
  background: var(--fm-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Títulos: Saira Condensed, uppercase, interlínea ajustada, color carbón. */
h1, h2, h3, h4, h5, h6,
.fm-head {
  font-family: var(--fm-font-head);
  text-transform: uppercase;
  color: var(--fm-carbon);
  line-height: 1.02;
  margin: 0 0 0.4em;
}

/* Links: heredan color; hover al acento de la sección. */
a { color: inherit; text-decoration: none; }
a:hover { color: var(--fm-accent); }

/* Utilidad de rayado reusable (header, footer, mastheads, countdown, CTA).
   Se aplica a un overlay absoluto; nunca captura eventos. */
.fm-stripe-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--fm-stripe);
}

/* Rayado coloreado del masthead: color de sección al 10%, tramos simplificados (§2). */
.fm-stripe-overlay--accent {
  background: repeating-linear-gradient(115deg,
    transparent 0 60px,
    rgba(var(--fm-accent-rgb), 0.10) 60px 62px);
}

/* Filete diagonal decorativo junto a títulos de sección (§2). */
.fm-tick {
  display: inline-block;
  height: 6px;
  width: 44px;
  background: var(--fm-accent);
  transform: skewX(-20deg);
}