/* 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: #287c4c;              /* verde bosque — links, botones, CTAs */
  --accent-ink: #1f6b3f;
  --accent-soft: #e1f0e6;
  --accent-2: #5fb87f;            /* 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;
  /* Mismos valores que --radius/--shadow* en src/styles.css (la app) --
     acá no existían, y la deriva ya era visible: el botón del sitio
     estático usaba 10px de radio, el de la app 12px, y nadie lo decidió
     (ticket [Contenido 5/7]). Portados tal cual, no re-elegidos. */
  --radius: 12px;
  --radius-sm: 9px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(33, 29, 22, 0.07);
  --shadow: 0 1px 2px rgba(33, 29, 22, 0.06), 0 10px 30px rgba(33, 29, 22, 0.07);
  --shadow-pop: 0 8px 28px rgba(33, 29, 22, 0.14);
}
:root[data-theme="dark"] {
  /* "Grafito frío" (27-ago-2026 en src/tokens.css, ver commit 8e105b8) --
     reemplaza el negro-marrón anterior (#0a0c10) por un azul-gris casi
     negro, sin matiz marrón, igual que /app. Solo estos neutros cambiaron
     -- el verde de marca ya estaba sincronizado. */
  --navy: #eef1f4;
  --accent: #3ba066;
  --accent-ink: #7dd39b;
  --accent-soft: rgba(59, 160, 102, 0.16);
  --accent-2: #8fcfa8;
  --ink: #dde2e7;
  --muted: #93a0ac;
  --line: #2a3038;
  --bg: #0a0c10;
  --bg-soft: #12151a;
  --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);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-pop: 0 10px 30px rgba(0, 0, 0, 0.5);
}
/* 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: #eef1f4;
    --accent: #3ba066;
    --accent-ink: #7dd39b;
    --accent-soft: rgba(59, 160, 102, 0.16);
    --accent-2: #8fcfa8;
    --ink: #dde2e7;
    --muted: #93a0ac;
    --line: #2a3038;
    --bg: #0a0c10;
    --bg-soft: #12151a;
    --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);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.35);
    --shadow-pop: 0 10px 30px rgba(0, 0, 0, 0.5);
  }
}