/*
 * Tokens compartidos del shell Fluyez.
 * Valores tomados del header y footer publicados en el sitio principal
 * (assets/css/header-nav.css, assets/theme/style.css y style.css del tema del home).
 * Ninguna otra hoja debe declarar colores o medidas en crudo.
 */

: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;

  /* 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-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;
  --fz-font-weight-regular: 400;
  --fz-font-weight-medium: 500;
  --fz-font-weight-semibold: 600;

  /* Medidas del shell */
  --fz-container: 1200px;
  --fz-header-height: 69px;
  --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;
}

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