/* =========================================================
   TOKENS · Lynn
   Hex de marca verificados píxel a píxel contra los logos entregados:
     --brand-orange     #FE4F1F  nube de logo-lynn-genesys.png
     --brand-navy       #1E2F40  wordmark "LYNN" de logo-lynn-core-dark.png
     --brand-blue       #4965A6  inicio del degradé del cerebro
     --brand-blue-light #70B5E2  fin del degradé del cerebro
     --brand-gray       #79797A  bajada "Lynn Core"

   Jerarquía cromática:
     naranjo = acción  (botones primarios, links de CTA, acentos puntuales, íconos de canal, banda CTA)
     azul    = estructura (fondos, titulares, tarjetas, elementos gráficos de acento)
   ========================================================= */
:root {
  /* ---------- Primitivos de marca ---------- */
  --brand-orange: #FE4F1F;
  --brand-orange-dark: #D43F10;   /* fondo de botón: 4.65:1 con texto blanco (AA) */
  --brand-orange-deep: #B5360D;   /* hover de botón y texto naranjo sobre fondo claro (6:1) */
  --brand-navy: #1E2F40;
  --brand-blue: #4965A6;
  --brand-blue-light: #70B5E2;
  --brand-gray: #79797A;          /* 4.3:1 sobre blanco: solo texto grande o decorativo, no cuerpo */
  --brand-gradient: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-light)); /* solo acentos gráficos, nunca texto */

  /* Canales RGB para transparencias: rgb(var(--navy-rgb) / .5) */
  --brand-rgb: 254 79 31;
  --brand-dark-rgb: 212 63 16;
  --blue-rgb: 73 101 166;
  --blue-light-rgb: 112 181 226;
  --navy-rgb: 30 47 64;
  --navy-900-rgb: 20 32 45;
  --navy-950-rgb: 14 23 33;

  /* ---------- Alias semánticos (los usan los componentes) ---------- */
  /* Acción */
  --brand: var(--brand-orange);
  --brand-600: var(--brand-orange-dark);
  --brand-700: var(--brand-orange-deep);
  --brand-300: #FF8A63;   /* naranjo legible sobre fondos oscuros */
  --brand-50: #FFF1EC;
  --magenta: #CA366C;     /* solo en degradés: banda CTA y --gradient-warm */
  /* Degradé magenta→naranjo para bandas con texto blanco: termina en el naranjo de botón (#D43F10) y no en
     --brand-orange, así todo el recorrido da AA con texto blanco de cuerpo (≥4,6:1). */
  --gradient-warm: linear-gradient(110deg, var(--magenta) 0%, #CF3A3E 50%, var(--brand-orange-dark) 100%);

  /* Estructura: escala del azul marino de marca */
  --navy: var(--brand-navy);
  --navy-800: #192837;
  --navy-900: #14202D;
  --navy-950: #0E1721;
  --navy-50: #EEF2F6;
  --blue-50: #EDF3FA;

  /* ---------- Acentos por industria ----------
     Hex exactos del CSS de cada página en lynn.cx (coinciden con las formas de color de los banners).
     Cada acento tiene variantes para cumplir AA sin cambiar el tono:
       raw      → formas, círculos, barras, H1 sobre navy, fondo del botón de acento
       -strong  → fondo con texto blanco (badge) y texto de acento sobre fondo claro (≥4.5:1)
       -on-dark → texto de acento sobre navy (≥4.5:1)
     Las páginas los asignan a --accent / --accent-strong / --accent-on-dark / --accent-ink (pages.css). */
  --accent-teal: #00AD9D;          /* banca, cobranzas */
  --accent-teal-strong: #008071;
  --accent-purple: #955C9F;        /* educación */
  --accent-purple-on-dark: #B285BC;
  --accent-amber: #FA8C13;         /* telco */
  --accent-amber-strong: #B35C05;
  --accent-sky: #00B6E7;           /* retail, salud (el original usa el mismo celeste en ambas) */
  --accent-sky-strong: #007EA1;

  /* Neutros */
  --white: #FFFFFF;
  --surface: #F5F7F9;
  --line: #E2E7EE;
  --line-strong: #C9D1DC;
  --line-hover: #97A3B3;
  --ink: #17232F;
  --ink-600: #44505E;
  --ink-500: #5A6573;
  --ink-on-dark: #C9D3DF;
  --ink-on-dark-muted: #A7B3C2;
  --ink-on-dark-subtle: #95A2B3;

  /* ---------- Logos ----------
     ÁREA DE PROTECCIÓN: el "área de protección igual al alto del ícono" del manual de marca
     NO aplica en el layout web. Chocó con el header (exigía ~108px de alto), con la placa del
     hero y con el bloque compacto del hero (logo → subtítulo a 16px). Decisión tomada: los
     espaciados del logo los define el layout (header 72px, hero 16px, etc.).
     No volver a plantearlo como conflicto. */
  --logo-h: 48px;                 /* header móvil · logo Lynn cuadrado (logo-lynn.png) */
  --logo-footer-h: 80px;
  --lockup-w: clamp(180px, 18vw, 240px);   /* ~240px en desktop */
  --lockup-ratio: .2851;          /* alto/ancho de logo-lynn-genesys.png (67/235) */

  /* Color: estados */
  --danger: #C62828;
  --danger-bg: #FDECEC;
  --success: #13795B;
  --success-bg: #E8F6F0;
  --warning-bg: #FFF7E0;
  --warning-ink: #7A5200;

  /* Tipografía */
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Display de marca (H1 de industria). Fuente "Eziear" usada en lynn.cx. PENDIENTE: confirmar licencia web (© DMF) */
  --font-display: "Eziear", "Segoe Print", "Marker Felt", cursive;
  /* Escala reducida (~10%) a pedido: base 15–16px */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: clamp(0.9375rem, 0.9rem + 0.12vw, 1rem);
  --fs-h3: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  /* Escala única para todo el sitio: todos los H1 miden --fs-h1, todos los títulos de sección --fs-h2, los de
     tarjeta/bloque --fs-h3 y todo el texto corrido --fs-base, sea cual sea la tipografía. No usar tamaños sueltos. */
  --fs-h2: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem);
  --fs-h1: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem);
  --fs-display: clamp(2.2rem, 1.5rem + 3.2vw, 4.25rem);
  --lh-tight: 1.15;
  --lh-body: 1.6;
  --measure: 70ch;

  /* Espaciado (base 4/8px) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  --s-20: 80px; --s-24: 96px;
  --section-y: clamp(56px, 3.048vw + 44.11px, 88px);   /* aire entre secciones y entre el hero y la primera sección, igual en todas las páginas: 56px en móvil (390px) → 88px desde 1440px */
  --gutter: 20px;   /* margen lateral: 20 / 40 / 64px según ancho */

  /* Radios */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 28px; --r-pill: 999px;

  /* Sombras */
  --shadow-xs: 0 1px 2px rgb(var(--navy-900-rgb) / .06);
  --shadow-sm: 0 1px 2px rgb(var(--navy-900-rgb) / .05), 0 4px 12px -2px rgb(var(--navy-900-rgb) / .08);
  --shadow-md: 0 2px 4px rgb(var(--navy-900-rgb) / .04), 0 12px 32px -8px rgb(var(--navy-900-rgb) / .14);
  --shadow-lg: 0 4px 8px rgb(var(--navy-900-rgb) / .04), 0 32px 64px -16px rgb(var(--navy-900-rgb) / .24);

  /* Movimiento (se anulan con prefers-reduced-motion más abajo) */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 150ms;
  --t: 220ms;
  --t-slow: 300ms;
  --t-menu: 420ms;
  --t-reveal: 600ms;
  --t-fade: 700ms;        /* fundido entre pantallas del rotador */
  --reveal-shift: 20px;

  /* Capas */
  --z-base: 1;
  --z-raised: 2;
  --z-sticky: 50;
  --z-menu: 99;
  --z-header: 100;
  --z-dropdown: 110;
  --z-skip: 1000;

  /* Layout */
  --header-h: 72px;
  --container: 1140px;
}

@media (min-width: 768px) { :root { --gutter: 40px; --logo-h: 60px; } }
@media (min-width: 1200px) { :root { --gutter: 64px; } }
@media (min-width: 1440px) { :root { --container: 1200px; } }

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t: 0ms;
    --t-slow: 0ms;
    --t-menu: 0ms;
    --t-reveal: 0ms;
    --t-fade: 0ms;
    --reveal-shift: 0px;
  }
}