/* =====================================================================
   Tokens de marca. El CSS de la página solo usa los roles (--bg, --ink,
   --accent...), nunca los colores base. Para vestir el configurador con
   otra empresa no se toca este archivo: se crea marcas/<empresa>.json,
   que pisa estos tokens, el logo y el enlace del botón (ver ?marca=ejemplo).
   Por defecto: Synopta (grafito, blanco roto y terracota; Newsreader para
   titulares y Manrope para texto), igual que synopta.cl.
   ===================================================================== */
@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 */
  --bg-deep: #1b1e21;
  --bg-alto: #2b3035; /* el punto más claro del fondo del escenario */

  /* Roles */
  --bg: var(--c-graphite);
  --ink: var(--c-paper);
  --ink-soft: color-mix(in srgb, var(--c-paper) 76%, transparent);
  --ink-mute: color-mix(in srgb, var(--c-paper) 56%, transparent);
  --line: color-mix(in srgb, var(--c-paper) 16%, transparent);
  --line-fuerte: color-mix(in srgb, var(--c-paper) 34%, transparent);
  --accent: var(--c-terra-soft);
  --accent-strong: var(--c-terra);
  --on-accent: var(--c-graphite);
  --danger: #f29b86;

  /* 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;

  --radius-sm: 4px;
  --header-h: 60px;
  --panel-w: 440px;
  --gutter: var(--s-200);
}

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