/*
  Fulana News — design tokens
  Paleta extraída por pixel-sampling de los logos reales de marca:
  - Teal #1FA3A6 (Logo Fulana.png)
  - Azul  #285C9A (Simbolo Fulana Azul.png)
  - Teal oscuro #082020 (isologo.svg, fondo del isotipo) usado como base del modo oscuro

  Tipografía: escala Apple HIG (Dynamic Type) — Large Title 34/41 hasta Caption 11/13.
  Una sola familia (Inter) para no romper la armonía, como recomienda Apple HIG.
  Referencia de tarjetas: Polymarket (bordes uniformes, sombra suave, pills de color).
*/

:root {
  /* Marca */
  --color-brand-teal: #1fa3a6;   /* Fulana Rock (radio) — reservado para el reproductor */
  --color-brand-teal-dim: #17797b;
  --color-brand-blue: #285c9a;

  /* Acentos de sección (badges, indicador activo, encabezados) */
  --color-news: #d31a2b;         /* Fulana News — editorial / última hora */
  --color-news-dim: #b3121f;
  --color-finances: #00875a;     /* Fulana Finances — mercados */
  --color-sports: #ff5e00;       /* Fulana Sports — dinámico */
  --color-international: #0056d2; /* Fulana International — global */

  /* Modo claro (default) */
  --color-paper: #f7f8f9;
  --color-surface: #ffffff;
  --color-surface-2: #f0f2f4;
  --color-ink: #14181b;
  /* Medido el 2026-08-04 contra producción: #6e7680 daba 4.6:1 sobre blanco (pasa AA)
     pero 4.33:1 sobre --color-paper (#f7f8f9, el fondo real de la página) y 4.1:1
     sobre el gris de los espacios publicitarios — abajo del 4.5:1 que pide WCAG AA
     para texto normal. Afectaba a la bajada de cada nota (15px, es contenido, no un
     epígrafe) y a la fecha de cada tarjeta. #646c76 da 5.32 / 5.00 / 4.74 sobre esos
     tres fondos: pasa en todos y la diferencia a ojo es mínima. */
  --color-ink-muted: #646c76;
  --color-border: #e6e8eb;
  --color-accent: var(--color-news);
  --color-accent-dim: var(--color-news-dim);
  --color-accent-ink: #ffffff;
  --color-link: var(--color-brand-blue);
  --color-up: #0da678;
  --color-up-soft: #e4f5ef;
  --color-down: #e5484d;
  --color-down-soft: #fdecec;
  --color-shadow: 20 20 30;

  /* Tipografía — una sola familia, pesos hacen la jerarquía */
  --font-display: "Inter", -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, "Segoe UI", sans-serif;

  /* Escala Apple HIG (pt ≈ px), tamaño / interlineado */
  --text-caption: 0.6875rem;   /* 11px — legales, menús */
  --lh-caption: 0.8125rem;     /* 13px */
  --text-footnote: 0.8125rem;  /* 13px — notas al pie */
  --lh-footnote: 1.125rem;     /* 18px */
  --text-subhead: 0.9375rem;   /* 15px — subtítulos de apoyo */
  --lh-subhead: 1.25rem;       /* 20px */
  --text-callout: 1rem;        /* 16px — citas */
  --lh-callout: 1.3125rem;     /* 21px */
  --text-body: 1.0625rem;      /* 17px — párrafo principal */
  --lh-body: 1.375rem;         /* 22px */
  --text-headline: 1.0625rem;  /* 17px — destacados, semibold */
  --lh-headline: 1.375rem;     /* 22px */
  --text-title3: 1.25rem;      /* 20px */
  --lh-title3: 1.5625rem;      /* 25px */
  --text-title2: 1.375rem;     /* 22px */
  --lh-title2: 1.75rem;        /* 28px */
  --text-title1: 1.75rem;      /* 28px */
  --lh-title1: 2.125rem;       /* 34px */
  --text-largetitle: 2.125rem; /* 34px */
  --lh-largetitle: 2.5625rem;  /* 41px */

  --tracking-tight: -0.02em; /* solo en Large Title / Title 1 */

  --leading-tight: 1.2;
  --leading-normal: 1.45;
  --leading-relaxed: 1.6;

  /* Espaciado (escala 4px), algo más compacta que un blog editorial */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.75rem;
  --space-7: 2.5rem;
  --space-8: 3.5rem;
  --space-9: 5rem;

  /* Radios uniformes estilo Polymarket */
  --radius-card: 16px;
  --radius-image: 12px;
  --radius-pill: 999px;
  --radius-sm: 10px;

  /* Aire entre el header sticky y el primer contenido (section-heading,
     search-heading, fin-hero, asset-header). Calibrado para el header de
     desktop (161px: ticker + nav + barra de IA, ver .header-ia-notice) — se
     redefine más chico en mobile/tablet dentro del breakpoint de layout.css
     donde el header baja a 61px + la barra. Ojo: si cambia el alto del header
     (o de .header-ia-notice), este valor va atrás. */
  --header-clearance: 118px;

  /* Alto aproximado de la bottom-tabbar (rediseño mobile v2, ≤767px) +
     margen — usado para correr por arriba de ella cualquier otro elemento
     fijo abajo (reader-notice, tabbar en components.css). Solo
     tiene efecto real en mobile; queda definido acá para no repetir el
     número calculado a mano en cada lugar que lo necesita. */
  --bottom-tabbar-space: 88px;

  /* Sombras suaves, no genéricas "gaussian card" */
  --shadow-card: 0 1px 2px rgb(var(--color-shadow) / 0.04);
  --shadow-card-hover: 0 10px 24px -8px rgb(var(--color-shadow) / 0.16);

  /* Motion */
  --ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration-fast: 150ms;
  --duration-standard: 220ms;
  --duration-reveal: 320ms;

  --breakpoint-sm: 375px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1440px;
}

:root[data-theme="dark"] {
  --color-paper: #0b0e11;
  --color-surface: #14181c;
  --color-surface-2: #1b2024;
  --color-ink: #edf0f2;
  --color-ink-muted: #9aa3ad;
  --color-border: #262c31;
  --color-shadow: 0 0 0;
  --color-accent: #f24858; /* News rojo, un punto más claro para contraste en oscuro */
  --color-accent-dim: var(--color-news-dim);
  --color-link: #7fb4e6;
  --color-up: #17c78e;
  --color-up-soft: #10302a;
  --color-down: #f2696d;
  --color-down-soft: #33191b;
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow-card-hover: 0 10px 24px -8px rgb(0 0 0 / 0.5);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 1ms;
    --duration-standard: 1ms;
    --duration-reveal: 1ms;
  }
}