/*
  mutuOK — la paleta y la tipografía.
  ==================================================================

  **Esto es una propuesta.** mutuOK no entregó identidad. Vive acá, en un solo
  bloque de tokens: reemplazarla por la suya es cambiar estos valores.

  ## Por qué esta paleta y no la anterior

  La primera versión era navy oscuro con un verde-aguamarina de acento. Se veía
  bien y estaba mal: **es el mismo par que Infatria** —navy `#192436` con verde
  `#2BBE7A`—, y el sitio entero terminaba pareciendo el de Infatria pintado de
  otro color. Un cliente al que se le muestra su propia marca no tiene que
  reconocer la del proveedor abajo.

  Así que la identidad se movió al otro extremo del círculo: **cálida**.

  1. **Terracota como primario.** Ladrillo, casa. Es lo más lejos que hay de un
     azul de fintech, y dice de qué se trata esto sin escribirlo: una hipoteca
     no es un producto financiero abstracto, es una casa.

  2. **Crema en vez de blanco.** El papel de un libro, no la pantalla de una
     aplicación. Baja el contraste general un punto y hace que los números
     —que son el contenido de una mutuaria— se lean como datos y no como avisos.

  3. **Lo tecnológico viene de la retícula, no del color.** Márgenes anchos,
     reglas finas, números tabulares. Un sitio cálido y desordenado parece
     artesanal; cálido y milimétrico parece un estudio que sabe lo que hace.

  ## Contrastes, medidos

  No están estimados: se calcularon. Lo que cada color puede y no puede hacer.

  | Sobre crema | Contraste | Sirve para |
  |---|---|---|
  | tinta `#241C17` | 15,69:1 | todo |
  | gris `#6B5F55` | 5,80:1 | cuerpo de texto |
  | gris tenue `#9A8D82` | 3,02:1 | **solo texto grande**, rótulos |
  | terracota `#C2542B` | 4,28:1 | **relleno, no texto chico** |
  | terracota fuerte `#A2411F` | 5,94:1 | enlaces y texto en terracota |
  | salvia `#3F6B54` | 5,71:1 | texto y series de datos |
  | ocre `#E3A93C` | **1,97:1** | **nunca texto sobre claro** |

  Blanco sobre terracota da 4,57:1 y sobre terracota fuerte 6,34:1: el botón
  primario usa el fuerte. El ocre sobre tinta da 7,98:1, y ese es el único lugar
  donde el ocre puede llevar letras.
*/

:root {
  /* ── La paleta ─────────────────────────────────────────────────────────── */

  /** Café muy oscuro, casi negro cálido. Titulares y fondos profundos. */
  --tinta: #241c17;
  --tinta-2: #3a2e26;

  /** Terracota: el primario. Ladrillo. **Relleno, no texto chico.** */
  --terracota: #c2542b;
  /** La versión que sí se lee sobre claro: enlaces, texto, botón primario. */
  --terracota-fuerte: #a2411f;
  --terracota-suave: #f6e4da;

  /**
   * Ocre: el acento, y **solo relleno**.
   *
   * 1,97:1 sobre crema — escrito sobre fondo claro es ilegible, y es el error
   * que vuelve barata una paleta cálida. Vive en barras, subrayados gruesos y
   * marcas de progreso; como letra, solo sobre tinta.
   */
  --ocre: #e3a93c;
  --ocre-suave: #fbeed3;

  /** Salvia: lo aprobado, lo cumplido, la segunda serie de un gráfico. */
  --salvia: #3f6b54;
  --salvia-suave: #e4ede7;

  /**
   * El rojo de error. **5,17:1 sobre crema, 5,54:1 sobre su propio fondo.**
   *
   * Vivía suelto en dos hojas con la nota «la paleta no tiene color de error»,
   * y era cierto: la terracota no sirve para eso —es el primario, y un campo
   * malo pintado del color de los botones no se lee como un problema—. Pero si
   * el sitio tiene estados de validación, el rojo es parte de la identidad y
   * merece estar medido acá, no escrito a mano donde toque.
   */
  --error: #c0362c;
  --error-suave: #fdeceb;

  /** Crema: el fondo. Papel, no pantalla. */
  --crema: #fbf7f0;
  --crema-2: #f2ebe0;
  --papel: #ffffff; /* tarjetas, para que despeguen del papel */

  --gris: #6b5f55; /* cuerpo de texto */
  --gris-tenue: #9a8d82; /* rótulos y notas — no para texto chico */
  --borde: #e3d9cc;
  --borde-fuerte: #cdbfab;

  /* ── Tipografía ────────────────────────────────────────────────────────── */

  /*
    Dos familias, y esta vez sí se sostiene: los **números son el contenido** de
    una mutuaria, y merecen una tipografía que los alinee. `--fuente-dato` es
    tabular: en una columna de dividendos, las cifras tienen que caer una debajo
    de la otra o la columna deja de poder compararse de un vistazo.
  */
  --fuente: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fuente-dato: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --peso-titulo: 700;
  --peso-semi: 600;

  /* ── Ritmo ─────────────────────────────────────────────────────────────── */

  --ancho: 1240px;
  --ancho-lectura: 60ch;

  /*
    Radios chicos. La versión anterior tenía esquinas muy redondeadas —lo que
    hace que todo parezca una aplicación—; acá el radio es apenas un suavizado,
    que es lo que hace que una retícula se lea como retícula.
  */
  --r-chico: 4px;
  --r: 8px;
  --r-grande: 14px;

  /*
    **Sin sombras difusas.** La versión anterior flotaba todo sobre sombras
    suaves, que es el idioma de una landing de software. Acá la profundidad la
    dan las reglas y el papel sobre crema: una tarjeta se distingue porque es
    blanca sobre crema y tiene un borde, no porque levite.
  */
  --sombra: 0 1px 0 var(--borde);
  --sombra-papel: 0 1px 2px rgb(36 28 23 / 5%);

  --curva: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/*
  Quien pidió menos movimiento lo recibe. Las animaciones presentan la
  información, no la son: apagarlas no le saca nada a nadie.
*/
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}