/* ==========================================================================
   Tokens de FomUp — GENERADO, no editar aquí.
   --------------------------------------------------------------------------
   Extraído automáticamente de los bloques :root de:
     fomup-brand/identidad/tokens/fomup-tokens.css          (oficiales)
     fomup-brand/identidad/tokens/fomup-tokens-derivados.css (grises y estados)

   Los valores se COPIAN, no se retranscriben: si cambian en marca, se vuelve a
   generar. Nunca hardcodear un hex en este proyecto — el cyan es una decisión
   abierta y debe poder cambiarse tocando solo marca.

   Lo único que NO se copia son los @font-face: el repo de marca sirve .ttf y
   este sitio sirve .woff2 subsetado (22 KB en vez de 85). Viven en estilo.css.
   ========================================================================== */

:root {
  /* --- Colores de marca — OFICIALES (los 3 del manual, no hay más) --------- */
  --fomup-grafito: #2d2d2d;
  --fomup-cyan:    #06b6d4;
  --fomup-blanco:  #ffffff;

  /* --- Roles semánticos — derivación técnica, no viene del manual ---------
     El cyan es color de ACENTO y de logo. Ver reglas de contraste abajo. */
  --fomup-texto:       var(--fomup-grafito);  /* 13.8:1 sobre blanco  ✅ AAA  */
  --fomup-superficie:  var(--fomup-blanco);
  --fomup-acento:      var(--fomup-cyan);
  --fomup-texto-inverso: var(--fomup-blanco); /* 13.8:1 sobre grafito ✅ AAA  */

  /* --- Tipografía — OFICIAL ----------------------------------------------
     Superfamilia Funnel (NORD ID + Kristian Moller). Ambas SIL OFL 1.1:
     libres para uso comercial, web e incrustacion.
     Archivos en identidad/tipografia/

       Funnel Display -> titulares y el logotipo. NO tiene italicas.
       Funnel Sans    -> TODO el texto: parrafos, interfaz, documentos.

     Regla: titular o logo -> Display. Todo lo demas -> Sans.               */
  --fomup-fuente-titular: 'Funnel Display', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --fomup-fuente-texto:   'Funnel Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Alias por compatibilidad: por defecto, texto. */
  --fomup-fuente: var(--fomup-fuente-texto);

  /* Ambas son variables, rango wght 300-800.                                */
  --fomup-peso-titular: 800;
  --fomup-peso-texto:   400;

  /* ---- derivados ---- */
  /* --- Escala de grises ---------------------------------------------------
     Cada línea trae su contraste real contra blanco y contra grafito.      */
  --fomup-gris-50:  oklch(98.5% 0.003 210);  /* #f8fbfb  fondo apenas distinto del blanco */
  --fomup-gris-100: oklch(96.5% 0.004 210);  /* #f0f4f5  superficie sutil               */
  --fomup-gris-200: oklch(92.5% 0.006 210);  /* #e2e7e8  bordes suaves                  */
  --fomup-gris-300: oklch(86.5% 0.008 210);  /* #cdd4d5  bordes, separadores            */
  --fomup-gris-400: oklch(72.0% 0.011 210);  /* #9da7a8  5.57:1 sobre grafito ✅ texto   */
  --fomup-gris-500: oklch(60.0% 0.013 210);  /* #788284  3.93:1 blanco ⚠️ NO texto normal */
  --fomup-gris-600: oklch(50.0% 0.013 210);  /* #5b6567  5.97:1 sobre blanco ✅ texto     */
  --fomup-gris-700: oklch(42.0% 0.011 210);  /* #464f50  8.42:1 sobre blanco             */
  --fomup-gris-800: oklch(36.0% 0.009 210);  /* #383e40 10.82:1 sobre blanco             */
  --fomup-gris-900: oklch(33.0% 0.006 210);  /* #323637 12.19:1 — vecino del grafito     */
  --fomup-gris-950: oklch(24.0% 0.006 210);  /* #1c2021 más hondo que el grafito         */

  /* --- Roles de texto (los pares que SÍ pasan AA) ------------------------- */
  --fomup-texto-secundario:         var(--fomup-gris-600);  /*  5.97:1 sobre blanco  */
  --fomup-texto-secundario-inverso: var(--fomup-gris-400);  /*  5.57:1 sobre grafito */
  --fomup-borde:                    var(--fomup-gris-200);
  --fomup-borde-fuerte:             var(--fomup-gris-300);

  /* --- Estados — cada uno con su variante para fondo oscuro --------------- */
  --fomup-error:        oklch(52.0% 0.190 27);   /* #be2323  6.08:1 sobre blanco  ✅ */
  --fomup-error-claro:  oklch(68.0% 0.160 27);   /* #ea6b60  4.45:1 sobre grafito ✅ */
  --fomup-exito:        oklch(50.0% 0.130 152);  /* #05773b  5.64:1 sobre blanco  ✅ */
  --fomup-exito-claro:  oklch(68.0% 0.140 152);  /* #48b06c  5.07:1 sobre grafito ✅ */
  --fomup-aviso:        oklch(57.2% 0.130 75);   /* #a46a00  4.52:1 sobre blanco  ✅ */
  --fomup-aviso-claro:  oklch(67.0% 0.140 80);   /* #c28a00  4.52:1 sobre grafito ✅ */
  --fomup-info:         var(--fomup-cyan);       /* 5.67:1 grafito ✅ / 2.43 blanco ❌ */

  /* --- El cyan que SÍ se puede leer sobre claro ---------------------------
     El cyan de marca sobre blanco da 2,43:1: no alcanza ni el 3:1 del texto
     grande. Este mantiene el mismo hue (210) con la luminosidad bajada hasta
     que cumple AA para texto normal. Es el mismo color, más oscuro.

     Úsalo SOLO para texto sobre fondos claros. Para logo, rellenos, barras y
     subrayados sigue mandando el cyan de marca. */
  --fomup-cyan-texto:   oklch(55% 0.092 210);   /* #10808f  4.67:1 sobre blanco ✅ */
}