/* Paleta de marca para las 63 páginas HTML estáticas (home/marketing, legal,
   comparación, ATS checker, galería de plantillas, guías) — reemplaza el
   :root{...} que cada una tenía copiado inline. Mismos VALORES que
   src/tokens.css (la app React); nombres de variable propios de esta capa
   porque las páginas estáticas ya tenían su convención chica (--navy/--ink/
   --line) antes de este archivo. Si cambia un valor acá, cambiarlo también
   en src/tokens.css — son dos archivos por límites reales de build
   (Vite-bundled vs. servido estático tal cual), no por descuido. Ver
   design-refresh-brief.md §0b para el porqué completo. */

/* Mismos archivos que src/tokens.css (ver ahí el porqué) — auto-hosteados,
   sin <link> a fonts.googleapis.com. */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/PublicSans-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/Fraunces-variable.woff2') format('woff2');
}

:root {
  --navy: #211d16;               /* texto fuerte de títulos — NO es el acento, es tinta */
  --accent: #2f4b3c;              /* verde bosque — links, botones, CTAs */
  --accent-ink: #24392d;
  --accent-soft: #e3ebe4;
  --accent-2: #4f7860;            /* variante clara del verde, para gradientes decorativos grandes (hero) */
  --ink: #322c22;
  --muted: #6f6653;
  --line: #e4dcc8;
  --bg: #fffdf8;
  --bg-soft: #f2ede0;
  --ok: #2f6b3f;
  --ok-soft: #e7f0e6;
  --bad: #b5432f;
  --bad-soft: #f7e7e2;
  --premium: #a9752c;             /* SOLO para lo relacionado a pago/Premium */
  --warning: #b8621f;              /* atención/editar/vencido — deliberadamente distinto de --premium */
  --warning-soft: rgba(184, 98, 31, 0.12);
  --font: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
}
:root[data-theme="dark"] {
  --navy: #f3efe3;
  --accent: #6ba087;
  --accent-ink: #86b89e;
  --accent-soft: rgba(107, 160, 135, 0.16);
  --accent-2: #8fb39e;
  --ink: #e7e1d1;
  --muted: #a89d84;
  --line: #3a3527;
  --bg: #17150f;
  --bg-soft: #211e17;
  --ok: #6fbb82;
  --ok-soft: rgba(111, 187, 130, 0.14);
  --bad: #d9694e;
  --bad-soft: rgba(217, 105, 78, 0.16);
  --premium: #d4a256;
  --warning: #e0913f;
  --warning-soft: rgba(224, 145, 63, 0.16);
}
/* Para consumidores que NO setean data-theme (p.ej. el dashboard admin, que
   solo sigue la preferencia del sistema) — mismos valores que el bloque de
   arriba, condicionados al media query en vez del atributo. Si alguien elige
   explícitamente claro/oscuro (data-theme puesto), ese selector gana por
   especificidad/orden igual que en viewer.css. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --navy: #f3efe3;
    --accent: #6ba087;
    --accent-ink: #86b89e;
    --accent-soft: rgba(107, 160, 135, 0.16);
    --accent-2: #8fb39e;
    --ink: #e7e1d1;
    --muted: #a89d84;
    --line: #3a3527;
    --bg: #17150f;
    --bg-soft: #211e17;
    --ok: #6fbb82;
    --ok-soft: rgba(111, 187, 130, 0.14);
    --bad: #d9694e;
    --bad-soft: rgba(217, 105, 78, 0.16);
    --premium: #d4a256;
    --warning: #e0913f;
    --warning-soft: rgba(224, 145, 63, 0.16);
  }
}