/*
 * Tokens compartidos del shell Fluyez.
 * Copia de los de Noticias (themes/fluyez-news/assets/css/tokens.css) para que
 * los tres sitios declaren los mismos valores. Ninguna otra hoja de este tema
 * debe declarar colores o medidas en crudo.
 * Los tokens de la capa editorial se revisan cuando llegue la plantilla de
 * ejemplo del equipo SEO, en los Sprints 3 y 4.
 */

:root {
  /* Marca */
  --fz-blue: #265ff1;
  --fz-blue-hover: #1d4ed8;
  --fz-blue-dark: #1644cc;
  --fz-blue-deep: #1d4abe;
  --fz-blue-light: #3b82f6;
  --fz-blue-soft: #f0f7ff;

  /* Texto */
  --fz-heading: #1a1a2e;
  --fz-text: #2a394a;
  --fz-text-muted: #778496;
  --fz-text-subtle: #6b7280;
  --fz-text-inverse: #ffffff;

  /* Superficies */
  --fz-surface: #ffffff;
  --fz-surface-alt: #f7f9fc;
  --fz-icon-surface: #e8effe;
  --fz-store-surface: #132536;
  --fz-border: #eaeaea;

  /* Footer: fondo oscuro propio, tomado del footer del sitio principal */
  --fz-footer-bg: #0c1a2c;
  --fz-footer-card: #122236;
  --fz-footer-divider: #26384e;
  --fz-footer-text: #eaeaea;

  /* Editorial */
  --fz-hero-bg: #2a394a;
  --fz-media-placeholder: #dde3ea;
  --fz-featured-row: 290px;
  --fz-sidebar-width: 320px;
  --fz-editorial-gap: 2.5rem;

  /* Entrada individual: frames desktop 419:12809 y movil 433:656 */
  --fz-reading-text: #4f5f74;
  --fz-reading-progress: #5289ff;
  --fz-table-surface-alt: rgb(244 247 250 / 50%);
  --fz-single-container: 1220px;
  --fz-single-sidebar: 333px;
  --fz-single-article: 820px;
  --fz-single-column-gap: 67px;
  --fz-single-page-space: 80px;
  --fz-single-page-space-mobile: 60px;
  --fz-single-mobile-gutter: 30px;
  --fz-single-panel-gap: 42px;
  --fz-single-stack-gap: 24px;
  --fz-single-heading-gap: 12px;
  --fz-single-card-padding: 32px;
  --fz-single-callout-padding: 34px;
  --fz-single-reading-height: 114px;
  --fz-single-reading-gap: 18px;
  --fz-single-icon: 18px;
  --fz-single-date-icon-width: 14px;
  --fz-single-date-icon-height: 16px;
  --fz-single-progress-height: 8px;
  --fz-single-author-height: 402px;
  --fz-single-author-portrait-width: 102px;
  --fz-single-author-portrait-height: 96px;
  --fz-single-author-avatar: 48px;
  --fz-single-author-copy-height: 112px;
  --fz-single-author-action-gap: 18px;
  --fz-single-share-button: 40px;
  --fz-single-related-columns: 3;
  --fz-single-related-gap: 34px;
  --fz-single-related-top: 80px;
  --fz-single-banner-top: 80px;
  --fz-author-banner-height: 120px;
  --fz-author-photo-size: 170px;
  --fz-author-photo-ring: 6px;
  --fz-author-card-padding: 0 40px 48px;
  --fz-author-cta-padding: 48px 40px;
  --fz-author-stack-gap: 16px;
  --fz-author-section-gap: 34px;
  --fz-author-section-top: 60px;
  --fz-author-bio-width: 720px;
  --fz-author-link-size: 36px;
  --fz-author-grid-columns: 3;
  --fz-author-role-tracking: 0.04em;
  --fz-single-button-padding: 12px 32px;
  --fz-single-feature-ratio: 820 / 421;
  --fz-single-title-size: 40px;
  --fz-single-title-line: 56px;
  --fz-single-title-size-mobile: 24px;
  --fz-single-title-line-mobile: 32px;
  --fz-single-heading-size: 24px;
  --fz-single-heading-line: 32px;
  --fz-single-heading-size-mobile: 20px;
  --fz-single-heading-line-mobile: 28px;
  --fz-single-copy-size: 16px;
  --fz-single-copy-line: 24px;
  --fz-single-meta-size: 14px;
  --fz-single-meta-line: 20px;
  --fz-single-list-indent: 24px;
  --fz-single-table-min: 720px;
  --fz-single-table-head-padding: 8px 24px;
  --fz-single-table-cell-padding: 24px;
  /* Comilla de las citas, del svg de 36x27 que mando diseno. */
  --fz-quote-mark-width: 36px;
  --fz-quote-mark-height: 27px;

  --fz-single-sticky-offset: 24px;

  /*
   * Listado del blog. Valores tomados del archivo Landings de Figma: el frame
   * "01 · Hero" y el frame "El Problema" en escritorio, y sus equivalentes del
   * tablero movil. La procedencia exacta de cada token esta en docs/FIGMA-HOME.md.
   */

  /* Hero del listado */
  --fz-hero-deep: #0a2ca6;
  --fz-hero-dot: #eaeff6;
  --fz-hero-dot-size: 4px;
  --fz-hero-dot-gap: 20.5px;
  --fz-hero-glow-size: 800px;
  --fz-hero-height: 272px;
  --fz-hero-height-mobile: 347px;
  --fz-hero-art-width: 217px;
  --fz-hero-art-width-right: 224px;
  --fz-hero-art-width-mobile: 143px;
  --fz-hero-inner-gap: 20px;
  --fz-hero-subtitle-gap: 12px;
  --fz-hero-left-x: 4.5%;
  --fz-hero-left-y: 42px;
  --fz-hero-right-x: 3.6%;
  --fz-hero-right-y: 12px;

  /* Tinta de la capa editorial: no coincide con la del shell */
  --fz-ink: #1f2a37;
  --fz-ink-soft: #3d4c60;
  --fz-ink-muted: rgb(31 42 55 / 65%);

  /* Buscador y chips de categoria */
  --fz-field-border: #dee2e8;
  --fz-field-height: 50px;
  --fz-chip-surface: #f4f7fa;

  /* Los seis tonos que rotan en las etiquetas de la tarjeta */
  --fz-tag-tone-1: #f0fcff;
  --fz-tag-tone-2: #e8faec;
  --fz-tag-tone-3: #fdf2f2;
  --fz-tag-tone-4: #f1f0ff;
  --fz-tag-tone-5: #f7fbdc;
  --fz-tag-tone-6: #e8f4fa;

  /* Azules de apoyo del ecosistema */
  --fz-blue-pale: #a0b9fa;
  --fz-blue-steel: #355ec7;
  --fz-blue-navy: #1d3c8c;

  /* Medidas exactas del listado y sus controles */
  --fz-list-container: 1220px;
  --fz-list-gutter-mobile: 30px;
  --fz-list-space: 80px;
  --fz-list-space-mobile: 60px;
  --fz-list-control-gap: 42px;
  --fz-list-control-gap-mobile: 30px;
  --fz-filter-row-gap: 18px;
  --fz-control-column-gap: 8px;
  --fz-search-height: 50px;
  --fz-search-gap: 14px;
  --fz-search-padding: 12px 16px;
  --fz-chip-padding: 6px 10px;
  --fz-control-border: 1px;
  --fz-focus-ring: 2px;
  --fz-focus-offset: 2px;

  /* Medidas exactas de las tres rejillas */
  --fz-radius-2xl: 20px;
  --fz-radius-3xl: 30px;
  --fz-card-media-ratio: 392 / 201;
  --fz-card-min: 320px;
  --fz-card-body-height: 162px;
  --fz-card-padding: 15px 16px;
  --fz-card-content-gap: 8px;

  --fz-grid-gap: 22px;
  --fz-grid-gap-wide: 26px;
  --fz-section-gap: 80px;
  --fz-section-gap-mobile: 30px;
  --fz-page-item: 32px;
  --fz-page-gap: 10px;

  /*
   * Reserva de los dos huecos de banner. La maqueta la pone una plantilla de
   * Elementor, asi que el tema solo guarda el sitio con la altura medida.
   */
  --fz-banner-height: 389px;
  --fz-banner-height-mobile: 530px;
  --fz-banner-alt-height: 369px;
  --fz-banner-alt-height-mobile: 446px;

  /* Estado */
  --fz-positive: #16a34a;
  --fz-negative: #dc2626;

  /* Tipografia */
  --fz-font: Poppins, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --fz-font-body: Inter, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --fz-font-size: 1rem;
  --fz-font-size-lg: 1.125rem;
  --fz-font-size-sm: 0.875rem;
  --fz-font-size-xs: 0.8125rem;
  --fz-font-size-xxs: 0.75rem;

  /*
   * Escala editorial en px. Astra reduce el tamano raiz en movil, asi que usar
   * rem aqui haria que los valores de Figma (40, 28, 20, 16, 14 y 12px) dejen
   * de ser exactos por debajo de su breakpoint.
   */
  --fz-font-size-xl: 20px;
  --fz-font-size-2xl: 28px;
  --fz-font-size-3xl: 40px;
  --fz-list-copy-size: 16px;
  --fz-list-body-size: 14px;
  --fz-list-label-size: 12px;
  --fz-line-height-xl: 28px;
  --fz-line-height-2xl: 36px;
  --fz-line-height-3xl: 56px;
  --fz-list-copy-line: 24px;
  --fz-list-body-line: 20px;
  --fz-list-label-line: 16px;
  --fz-font-weight-regular: 400;
  --fz-font-weight-medium: 500;
  --fz-font-weight-semibold: 600;
  --fz-font-weight-bold: 700;

  /* Medidas del shell */
  --fz-container: 1200px;

  /*
   * La barra de navegacion y el total del header son dos medidas distintas: un
   * cintillo montado dentro del header suma su altura al total sin tocar la barra.
   * Un plugin solo declara --fz-ticker-height; la suma la hace el tema.
   */
  --fz-header-bar-height: 69px;
  --fz-ticker-height: 0px;
  --fz-header-height: calc(var(--fz-header-bar-height) + var(--fz-ticker-height));

  --fz-gutter: 1.5rem;
  --fz-radius: 6px;
  --fz-radius-lg: 8px;
  --fz-radius-md: 10px;
  --fz-radius-xl: 12px;
  --fz-radius-pill: 999px;

  /* Medidas de la navegacion, replicadas del home */
  --fz-nav-item-gap: 0.75rem;
  --fz-nav-row-padding: 15px 1.25rem;
  --fz-dropdown-min: 280px;
  --fz-dropdown-max: 320px;
  --fz-countries-min: 300px;
  --fz-flyout-min: 240px;
  --fz-coins-column: 275px;
  --fz-coins-gap: 90px;
  --fz-icon-box: 36px;
  --fz-hover-bar: 3px;

  /* Elevacion */
  --fz-shadow-header: 0 1px 3px rgb(0 0 0 / 6%);
  --fz-shadow-dropdown: 0 4px 12px rgb(0 0 0 / 8%);
  --fz-shadow-mega: 0 10px 40px rgb(0 0 0 / 8%), 0 2px 8px rgb(0 0 0 / 4%);
  --fz-shadow-store: 0 1px 3px rgb(0 0 0 / 20%);

  /* Capas: el header queda por encima del contenido de Astra */
  --fz-z-header: 100;
  --fz-z-dropdown: 110;
  --fz-z-flyout: 111;
  --fz-z-overlay: 120;

  /* Movimiento: el home usa 200ms para color y 300ms para la barra de hover */
  --fz-transition: 200ms ease;
  --fz-transition-slow: 300ms ease;

  /* Objetivo tactil minimo accesible (solo se aplica en movil) */
  --fz-tap-target: 44px;

  /* Colores de marca de las redes, para los botones de compartir. Los SVG de
     redes traen el glifo en blanco fijo, asi que el color va en el circulo. */
  --fz-social-facebook: #1877f2;
  --fz-social-whatsapp: #25d366;
  --fz-social-linkedin: #0a66c2;
  --fz-social-x: #000000;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --fz-transition: 0ms;
    --fz-transition-slow: 0ms;
  }
}