/* ============================================================
   Penwork — capa de tokens del proyecto.

   Se carga DESPUÉS de `tokens.css`, que es copia literal del design
   system de 4d3 y no se edita nunca (se re-sincroniza con la skill).
   Aquí vive todo lo que 4d3 no cubre, que en una herramienta de
   trabajo es bastante: color semántico, modo oscuro y densidad.

   EXCEPCIÓN DECLARADA A LA INVARIANTE 5 («los hex de marca viven solo
   en tokens.css»). Los colores de abajo NO son colores de marca: son
   la paleta funcional de la aplicación, y existen porque **ninguno de
   los seis colores de 4d3 alcanza 4,5:1 sobre blanco** — el mejor,
   --dark-blue, se queda en 3,90. Sustituir --acento (6,68) por él
   sería una regresión de accesibilidad medible en la variable más
   usada del producto. La triada entra igualmente, pero donde su
   contraste basta: bordes, rombos, viñetas y decoración.

   Este fichero es la ÚNICA fuente de literales hex del proyecto.
   Si aparece un `#rrggbb` en `estilos.css`, es un error.
   ============================================================ */

:root {
  /* --- Color funcional. Ratios sobre --papel / --fondo al lado. --- */
  --tinta:       #16202b;   /* 15,49 / 16,46 */
  --tinta-suave: #4a5766;   /*  6,94 /  7,38 */
  --fondo:       #f7f8fa;
  --papel:       #ffffff;
  --borde:       #d3d9e0;   /* separadores y bordes decorativos */
  --acento:        #0b5f9e; /*  6,68 /  6,28 */
  --acento-oscuro: #084a7c;
  --ok:    #12694a;         /*  6,68 /  6,28 */
  --aviso: #8a5a00;         /*  5,93 /  5,58 */
  --error: #a3231f;         /*  7,45 /  7,01 */

  /* Borde de los controles de formulario. Va aparte de --borde porque
     WCAG 1.4.11 le exige 3:1 contra los colores adyacentes y el gris
     decorativo solo llegaba a 1,42. Este da 3,31 sobre --papel y 3,11
     sobre --fondo. */
  --borde-control: #7f8fa2;

  /* Texto sobre relleno de acento. En claro es blanco (6,68 sobre
     --acento); en oscuro, tinta sobre el acento claro. */
  --sobre-acento: #ffffff;

  /* --- La triada de 4d3, resuelta para este modo ---
     En claro se usan las variantes oscuras: 3,41 / 3,90 / 3,89 sobre
     blanco. Bastan para bordes, rombos y viñetas (1.4.11 pide 3:1),
     NUNCA para texto. Para texto está --tinta. */
  --triada-1: var(--dark-green);
  --triada-2: var(--dark-blue);
  --triada-3: var(--dark-coral);

  /* --- Geometría: la marca es de esquinas vivas --- */
  --radio: 0;
  --radio-pequeno: 4px;

  --sombra: 0 1px 2px rgba(22, 32, 43, .08), 0 4px 14px rgba(22, 32, 43, .06);

  /* --- Escala de tipos de la aplicación ---
     La técnica de la invariante 4 (clamp() siempre, nunca font-size en
     media queries) con valores propios. Los de 4d3 son de landing: un
     --text-hero de 4,5rem convertiría en carteles los diez <h1> de
     panel, y una herramienta se lee por densidad. */
  --texto-h1:     clamp(1.7rem, 4.5vw, 2.5rem);
  --texto-h2:     clamp(1.15rem, 1.6vw, 1.35rem);
  --texto-cuerpo: 1rem;
  --texto-guia:   clamp(1.05rem, 1.3vw, 1.15rem);
  --texto-menudo: .9rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tinta:       #e8edf3;
    --tinta-suave: #a7b3c1;
    --fondo:       #10161d;
    --papel:       #18202a;
    --borde:       #2c3846;
    --acento:        #6fb4ee;
    --acento-oscuro: #9acdf5;
    --ok:    #57c79b;
    --aviso: #e0a640;
    --error: #f08b86;

    --borde-control: #66717f;  /* 3,31 sobre --papel, 3,67 sobre --fondo */
    --sobre-acento:  #08131c;

    /* Sobre fondo oscuro se apaga por completo el nivel --dark-*: cae a
       4,21 contra --papel. Mandan los pasteles, que ahí rinden entre
       6,23 y 8,49 — que es justo donde 4d3 nunca los usa. */
    --triada-1: var(--pastel-green);
    --triada-2: var(--pastel-blue);
    --triada-3: var(--pastel-coral);

    --sombra: none;
  }
}