/* Paleta de marca (ver inventario_contenido.md, seccion 4) y roles semanticos.
   Todos los azules salen del mismo matiz (~222 grados) y todos los naranjas de la misma
   familia, en dos escalas: clara y oscura. Los componentes usan solo los roles (--accent,
   --ink, --header-fill...), nunca los hex, para que ambos modos queden en armonia. */
:root {
  --color-primary-navy: #001959;   /* constante de marca (splash, mapa) */
  --color-primary-orange: #F47200; /* constante de marca */
  --color-accent-blue: #3B82F6;
  --color-facebook-blue: #1877F2;

  /* Modo claro */
  --bg-page: #F4F6FC;
  --bg-surface: #FFFFFF;
  --bg-nav: var(--header-fill);
  --bg-panel: #001959;
  --header-fill: #001959;
  --footer-bg: #FFD9B8;      /* naranja pastel (claro) */
  --footer-fg: #001959;
  --footer-line: rgba(0, 25, 89, .25);
  --ink: #001959;            /* texto y bordes de botones */
  --ink-contrast: #FFFFFF;   /* texto sobre --ink */
  --text-body: #0B1330;
  --text-heading: #001959;
  --text-muted: #46506B;
  --text-accent: #B45309;    /* naranja legible como texto sobre fondo claro (AA) */
  --border-color: #C9D3EA;
  --focus-ring: #1D4ED8;
  --accent: #F47200;         /* naranja: franjas, marcas, botones */
  --accent-hover: #FF8A26;
  --on-accent: #001959;      /* texto sobre --accent */
  --text-shadow: 0 2px 4px rgba(0, 25, 89, .25); /* sombreado suave de titulos */
}

[data-theme="dark"] {
  --bg-page: #070F24;
  --bg-surface: #0F1B3A;
  --bg-panel: #16285A;
  --header-fill: #16285A;
  --footer-bg: #B4C7EE;      /* azul pastel (oscuro) */
  --footer-fg: #0F1B3A;
  --footer-line: rgba(15, 27, 58, .3);
  --ink: #FFFFFF;
  --ink-contrast: #16285A;
  --text-body: #EEF2FF;
  --text-heading: #FFFFFF;
  --text-muted: #AAB6D3;
  --text-accent: #FFA040;
  --border-color: #2B3F70;
  --focus-ring: #93C5FD;
  --accent: #FF8A26;
  --accent-hover: #FFA757;
  --on-accent: #001959;
  --text-shadow: 0 2px 4px rgba(0, 0, 0, .55);
}

@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url("../fonts/atkinson-hyperlegible-400.dbcfe2251e4f.woff2") format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url("../fonts/atkinson-hyperlegible-700.df8aab2e80b1.woff2") format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hemiheads';
  src: url("../fonts/Hemiheads.1204a819181f.otf") format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}