/* ============================================================================
   tokens.css — el sistema de «La cotización»

   La calculadora no es una página de precios: es el documento de cotización
   escribiéndose delante del prospecto. De ahí salen casi todas las decisiones
   de abajo, y por eso se parecen tan poco a las de una landing.

   · Las esquinas son casi rectas. Un documento tiene bordes, no burbujas.
   · La estructura la llevan FILETES de 1px, no cajas con fondo. Es el recurso
     estructural de dakagency.net y además es lo único que sobrevive cuando el
     dueño del negocio le da a «Guardar en PDF»: los navegadores no imprimen
     fondos salvo que la casilla de gráficos de fondo esté marcada, y esa
     casilla no la controlamos nosotros.
   · Los importes van SIEMPRE alineados a la derecha. Poppins no tiene cifras
     tabulares —su «1» mide la mitad que su «0» y font-variant-numeric no lo
     arregla porque el subconjunto latin no trae la característica— así que la
     columna se sostiene por el borde derecho, como en toda cotización impresa.
     Meter una segunda familia solo para las cifras está prohibido por DESIGN.md.
   · Los ratios de contraste de abajo están medidos contando el alpha, que es la
     regla dura. El morado de marca da 4.49 sobre el fondo y NO vale como texto.
   ========================================================================== */

@layer tokens, base, mundo, utilidades;

@layer tokens {
  :root {
    /* ── Superficies ──
       Papel sobre escritorio. La dirección es un documento de cotización, y los
       documentos son de papel: el fondo oscuro venía de la marca, no del mundo,
       y era lo que hacía que esto se pareciera a todo lo demás.

       La mesa es más oscura que la hoja, para que la hoja se lea como algo
       APOYADO encima y no como una caja pintada de blanco. */
    --mesa:         #E4E0EB;   /* el escritorio: gris con un punto de violeta */
    --fondo:        #E4E0EB;   /* alias, para no romper lo que ya lo usa */
    --hoja:         #FFFFFF;   /* la hoja de la cotización */
    --hoja-honda:   #F4F1F8;   /* campos y celdas hundidas */
    --hoja-alta:    #F3EBFC;   /* filas activas y bloque de totales */

    /* Roce del puntero. En el mundo oscuro era un velo casi blanco al 5%; sobre
       papel blanco eso no existe. En claro el hover ENSUCIA levemente, no ilumina. */
    --roce:         rgba(20, 16, 28, .045);
    --roce-fuerte:  rgba(20, 16, 28, .07);

    /* ── Filetes ── la estructura. En papel se ven mejor que nunca. */
    --filete:       rgba(20, 16, 28, .14);
    --filete-medio: rgba(20, 16, 28, .26);
    --filete-vivo:  rgba(109,  0, 175, .5);

    /* ── Tinta ──  ratio medido sobre --mesa / sobre --hoja */
    --tinta:        #14101C;                  /* 14.42 / 18.74 */
    --tinta-2:      rgba(20, 16, 28, .70);    /*  6.19 /  7.01 */
    --tinta-3:      rgba(20, 16, 28, .64);    /*  4.72 /  5.19 — suelo de texto */
    --tinta-tenue:  rgba(20, 16, 28, .40);    /*  2.6  — NUNCA texto, solo filetes */

    /* ── Los dos colores de DAK, llevados a papel ──
       El #B024FF de marca sobre blanco da 3.2 y no vale ni para texto grande.
       Estos son el mismo tono bajado hasta que aguanta AA sobre las dos superficies. */
    --morado:       #7A00C2;   /* 6.20 / 8.06: superficies y sellos. Blanco encima: 8.06 */
    --morado-tinta: #6D00AF;   /* 7.12 / 9.25: el morado cuando es texto */
    --morado-claro: #9B2BE0;   /* hover de superficie morada */
    --teal:         #00625F;   /* 5.55 / 7.21: la unidad /mes */
    --alarma:       #B4003C;   /* 5.38 / 6.99 */
    --logro:        #0A6B45;   /* 5.05 / 6.56 */

    /* ── Material ──
       Antes aquí había un radial-gradient morado haciendo de «iluminación
       ambiental». Es el mismo truco que los orbes, solo que más suave, y es la
       firma del fondo generado: un lavado de color sobre negro plano. Fuera.

       Lo que lo sustituye es MATERIA, no color: grano real generado con
       feTurbulence. Un escritorio tiene fibra y una hoja tiene su propia trama,
       más fina. Sin grano, un mundo de documento es un rectángulo oscuro. */

    /* Fibra del escritorio: ruido fractal grueso, muy poco opaco */
    --grano-mesa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23f)' opacity='.30'/%3E%3C/svg%3E");

    /* Trama de la hoja: más fina y más densa, como papel de oficina */
    --grano-hoja: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.10'/%3E%3C/svg%3E");

    /* ── Tipografía ── Poppins autoalojada, sin segunda familia ── */
    --letra: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --t-micro:  11px;   /* suelo absoluto de texto funcional. Sin excepciones */
    --t-menor:  12px;
    --t-base:   14px;
    --t-medio:  16px;
    --t-mayor:  19px;
    --t-cifra:  30px;
    --t-total:  clamp(34px, 4.6vw, 54px);

    --peso-normal: 400;
    --peso-medio:  600;
    --peso-fuerte: 700;

    /* Tracking negativo solo en display; las mayúsculas pequeñas van abiertas */
    --track-display: -.02em;
    --track-rotulo:  .14em;

    /* ── Espaciado, base 4 ── */
    --e1: 4px;   --e2: 8px;   --e3: 12px;  --e4: 16px;
    --e5: 20px;  --e6: 24px;  --e8: 32px;  --e10: 40px;  --e14: 56px;

    /* ── Radios ── un documento no es una burbuja ── */
    --r-nada: 0;
    --r-min:  2px;
    --r:      4px;
    --r-caja: 6px;

    /* ── Profundidad ── con desplazamiento y desenfoque.
         Un halo de color sin offset es decoración, no profundidad. ── */
    /* Sombra de contacto: la hoja está APOYADA en la mesa, no flotando sobre ella.
       Corta y muy cerca del borde, como el papel de verdad. */
    --sombra-hoja: 0 1px 1px rgba(20,16,28,.10), 0 10px 26px -14px rgba(20,16,28,.42);
    --sombra-flot: 0 -6px 22px -10px rgba(20,16,28,.28);

    /* ── Movimiento ── una sola curva en todo el sitio ── */
    --curva: cubic-bezier(.19, 1, .22, 1);
    --rapido: 120ms;
    --medio:  200ms;
    --lento:  320ms;

    /* ── Medidas ── */
    --ancho-max: 1460px;
    --alto-toque: 44px;   /* área táctil objetivo; el mínimo duro es 24 */

    color-scheme: light;
    accent-color: var(--morado);
  }
}