/* ═══════════════════════════════════════════════════════════════════════════
   VanyCorp · los tokens de la marca
   ═══════════════════════════════════════════════════════════════════════════

   Grafito, verdigrís y latón, con Archivo para el texto y Plex Mono para
   claves, fechas y cifras. Quien salta de un producto a otro no debería notar
   el cambio de casa.

   No se inventó nada aquí: estos valores salieron de la consola de VanySign y
   del portal de cuenta.vanycorp.com, que ya los compartían. Lo que hace este
   archivo es sacarlos de allí para que dejen de vivir copiados en dos sitios y
   puedan usarlos los siete productos.

   ── Las fuentes van AUTO-HOSPEDADAS, y no es una preferencia ────────────────
   La CSP de todos los productos es `font-src 'self'`. Un enlace a Google Fonts
   se bloquea **en silencio**: la página se pinta con la tipografía del sistema
   y nadie ve un error. Los .woff2 viajan con el paquete.

   ── El tema oscuro, y por qué hay tres selectores ──────────────────────────
   **El mecanismo estándar es `data-theme` en <html>** (decidido el 2026-09-09):
   `light`, `dark`, o ausente para seguir al sistema. `.dark` no sirve porque
   solo distingue dos estados y no puede expresar «sigue al sistema» una vez que
   alguien eligió claro.

   `.dark` se sigue aceptando mientras dure la migración —hoy lo usan VanySign y
   VanyFlow— para no tener que cambiarlas todas el mismo día, y se retira cuando
   no quede ninguna.

   El orden importa y es el de siempre: el claro completo en `:root`, el oscuro
   del sistema con guarda para que una elección explícita de claro le gane, y
   la elección explícita de oscuro al final para que gane en los dos sentidos.
   Un color cuya única definición viva dentro de un `@media` no se aplica nunca
   en el estado sin marcar, que es el de la mayoría de la gente.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tipografía ───────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62.5% 125%;
  font-display: swap;
  src: url('./fuentes/archivo.latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62.5% 125%;
  font-display: swap;
  src: url('./fuentes/archivo.latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
                 U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
                 U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fuentes/plexmono-400.latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fuentes/plexmono-500.latin.woff2') format('woff2');
}

/* ── Los tokens, tema claro ───────────────────────────────────────────────── */
:root {
  --vc-font-sans: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --vc-font-mono: 'Plex Mono', ui-monospace, 'Cascadia Mono', 'Consolas', monospace;

  /* Escala tipográfica. Cinco tamaños y ni uno más: cada tamaño extra es una
     decisión que alguien tendrá que tomar otra vez en la siguiente pantalla. */
  --vc-t-titulo: 1.5rem;      /* el título de la tarjeta de acceso */
  --vc-t-subtitulo: 1rem;
  --vc-t-cuerpo: 0.9375rem;   /* 15px: el texto y los campos */
  --vc-t-nota: 0.8125rem;     /* 13px: la nota de seguridad del pie */
  --vc-t-marca: 0.7rem;       /* el CONTEXTO del lockup, en versalitas */

  --vc-peso-normal: 400;
  --vc-peso-medio: 500;
  --vc-peso-fuerte: 600;
  --vc-peso-marca: 800;

  /* Superficies y tinta */
  --vc-bg: #f3f4f2;
  --vc-superficie: #ffffff;
  --vc-superficie-2: #e9ede9;
  --vc-borde: #d5dbd7;
  --vc-tinta: #0f1618;
  --vc-tinta-suave: #3c4744;
  /* Un punto más oscura desde el sprint 14 (accesibilidad, M7): la de antes,
     #6b7773, daba 4,65:1 sobre blanco pero 4,22 sobre `--vc-bg` y 3,94 sobre
     `--vc-superficie-2`, y como texto pequeño se usa en los tres. Ahora 5,37 /
     4,87 / 4,54. */
  --vc-tinta-tenue: #626d69;
  /* El texto de ejemplo de los campos (placeholder). Apunta a la tinta tenue,
     que da AA en los dos temas (5,37:1 sobre blanco; 5,44:1 sobre la superficie
     oscura): como se redefine en el oscuro, este sigue solo. */
  --vc-tinta-ejemplo: var(--vc-tinta-tenue);

  /* Verdigrís: el primario de la marca. Oscurecido el 2026-10-02 (decisión I3
     de Luis): el de antes, #2e8f79, daba 3,95:1 con texto blanco encima y como
     enlace sobre blanco —no llegaba a AA—. Ahora el primario es el segundo
     verde que la marca ya tenía, y el del cursor encima, uno más oscuro aún.
     El verde claro sigue vivo como `--vc-ok` (el estado «bien», el recorrido
     hecho), donde no lleva texto blanco encima. */
  --vc-primario: #236f5e;
  --vc-primario-2: #1a5548;
  --vc-primario-fg: #ffffff;
  --vc-primario-suave: #e1f0ea;

  /* Latón: el acento del lockup y de los avisos templados */
  --vc-laton: #a98a4b;
  --vc-laton-suave: #f3ecdb;
  /* El latón, cuando es TEXTO (sprint 14, accesibilidad, M1 y M12). `--vc-laton`
     da 3,27:1 sobre blanco y 2,78 sobre su fondo suave: sirve para filetes,
     fondos e iconos, no para leer. Este es el tono más cercano (mismo matiz,
     menos luz) que llega a 4,5:1 sobre las cuatro superficies donde se escribe:
     blanco 5,37 · `--vc-bg` 4,87 · `--vc-superficie-2` 4,54 · `--vc-laton-suave`
     4,56. En oscuro el latón ya pasa (6,48 como mínimo) y es el mismo. */
  --vc-laton-texto: #846626;

  /* Estados */
  --vc-ok: #2e8f79;
  --vc-aviso: #a98a4b;
  --vc-error: #b4322a;
  --vc-error-suave: #f7e3e1;

  /* Forma */
  --vc-radio-sm: 0.5rem;
  --vc-radio-md: 0.75rem;
  --vc-radio-lg: 1rem;
  --vc-radio-tarjeta: 1.25rem;

  /* Espaciado: una escala de cuatro en cuatro, para que nada quede a ojo */
  --vc-e-1: 4px;
  --vc-e-2: 8px;
  --vc-e-3: 12px;
  --vc-e-4: 16px;
  --vc-e-5: 24px;
  --vc-e-6: 32px;
  --vc-e-7: 48px;

  --vc-sombra-tarjeta: 0 6px 24px rgba(15, 22, 24, 0.08);
  --vc-sombra-elevada: 0 12px 28px rgba(15, 22, 24, 0.16);

  /* El fondo difuminado del acceso. Dos manchas del primario y del latón muy
     rebajadas: dan profundidad sin competir con el formulario, que es lo único
     que la persona tiene que mirar. */
  --vc-fondo-acceso:
    radial-gradient(60rem 40rem at 12% -10%, color-mix(in oklab, var(--vc-primario) 14%, transparent), transparent 60%),
    radial-gradient(50rem 36rem at 105% 108%, color-mix(in oklab, var(--vc-laton) 12%, transparent), transparent 62%),
    var(--vc-bg);
}

/* ── Oscuro del sistema, salvo que se haya elegido claro a mano ───────────── */
@media (prefers-color-scheme: dark) {
  :root:not(.claro):not([data-theme='light']) {
    --vc-bg: #0f1618;
    --vc-superficie: #17211f;
    --vc-superficie-2: #1e2a27;
    --vc-borde: #2b3835;
    --vc-tinta: #e9ecea;
    --vc-tinta-suave: #c3cbc7;
    --vc-tinta-tenue: #8a9793;

    --vc-primario: #4fb39a;
    /* Más claro desde el sprint 14 (M5, M8): #2e8f79 daba 4,18:1 sobre la
       superficie y 3,58 sobre `--vc-primario-suave`, y es texto (acciones de
       lista, «Activa», enlaces). Ahora 5,26 / 4,51. */
    --vc-primario-2: #43a18a;
    --vc-primario-fg: #0f1618;
    --vc-primario-suave: #1b2f2a;

    --vc-laton: #c9a75f;
    --vc-laton-suave: #2c261a;
    --vc-laton-texto: #c9a75f;

    --vc-ok: #4fb39a;
    --vc-aviso: #c9a75f;
    --vc-error: #f08a80;
    --vc-error-suave: #3a1f1d;

    --vc-sombra-tarjeta: 0 6px 24px rgba(0, 0, 0, 0.45);
    --vc-sombra-elevada: 0 12px 28px rgba(0, 0, 0, 0.55);
  }
}

/* ── Oscuro elegido a mano ───────────────────────────────────────────────────
      **El mecanismo estándar es `data-theme` en <html>** (decidido el
      2026-09-09). No es cuestión de gusto: `.dark` solo distingue dos estados y
      **no puede expresar «sigue al sistema»** una vez que alguien eligió claro
      —hay que quitar la clase y no queda nada que diga que la elección fue
      explícita—. `data-theme` sí: `light`, `dark`, o ausente.

      `.dark` sigue aceptado mientras quede alguna superficie con él (hoy
      VanySign y VanyFlow), y se retira cuando no quede ninguna. ───────────── */
:root.dark,
:root[data-theme='dark'] {
  --vc-bg: #0f1618;
  --vc-superficie: #17211f;
  --vc-superficie-2: #1e2a27;
  --vc-borde: #2b3835;
  --vc-tinta: #e9ecea;
  --vc-tinta-suave: #c3cbc7;
  --vc-tinta-tenue: #8a9793;

  --vc-primario: #4fb39a;
  --vc-primario-2: #43a18a;   /* ver el bloque de arriba: 5,26 / 4,51 */
  --vc-primario-fg: #0f1618;
  --vc-primario-suave: #1b2f2a;

  --vc-laton: #c9a75f;
  --vc-laton-suave: #2c261a;
  --vc-laton-texto: #c9a75f;

  --vc-ok: #4fb39a;
  --vc-aviso: #c9a75f;
  --vc-error: #f08a80;
  --vc-error-suave: #3a1f1d;

  --vc-sombra-tarjeta: 0 6px 24px rgba(0, 0, 0, 0.45);
  --vc-sombra-elevada: 0 12px 28px rgba(0, 0, 0, 0.55);
}