/* =====================================================================
   Tokens de marca. Para vestir el detector con otra empresa basta con
   editar este archivo: paleta, tipografías y logo. El resto del CSS solo
   usa los roles (--bg, --ink, --accent...), nunca los colores base.
   Paleta y fuentes: las de synopta.cl (grafito, blanco roto, terracota;
   Newsreader para titulares y Manrope para texto).
   ===================================================================== */
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader-latin.woff2') format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Paleta base (la del logo) */
  --c-graphite: #22262a;
  --c-paper: #f6f3ee;
  --c-terra: #b5523b;
  --c-terra-soft: #d98a72; /* terracota aclarada: da contraste para texto sobre grafito */

  /* Roles */
  --bg: var(--c-graphite);
  --bg-deep: #1b1e21;
  --ink: var(--c-paper);
  --ink-soft: rgb(246 243 238 / 0.76);
  --ink-mute: rgb(246 243 238 / 0.56);
  --line: rgb(246 243 238 / 0.16);
  --accent: var(--c-terra-soft);
  --accent-strong: var(--c-terra);
  --on-accent: var(--c-graphite);

  /* Gráficos */
  --bar: rgb(246 243 238 / 0.34);
  --bar-peak: var(--c-paper);
  --bar-zero: rgb(246 243 238 / 0.3);
  --bar-alert: var(--c-terra-soft);

  /* Estados */
  --estado-corte: var(--accent);
  --estado-rampa: var(--ink);
  --estado-sin-forma: var(--ink-soft);

  /* Tipografía */
  --font-serif: 'Newsreader', Georgia, serif;
  --font-sans: 'Manrope', system-ui, sans-serif;

  /* Espaciado */
  --s-50: 4px;
  --s-75: 8px;
  --s-100: 12px;
  --s-200: 16px;
  --s-300: 24px;
  --s-400: 32px;
  --s-600: 48px;
  --s-700: 64px;

  --radius-sm: 4px;
  --ancho: 1120px;
  --gutter: var(--s-200);
}

@media (min-width: 720px) {
  :root {
    --gutter: var(--s-600);
  }
}