/* ==========================================================================
   RematoHastaMiSuegra.cl — tokens
   Fuente única de colores, tipografía, espaciado, radios, sombras y tiempos.
   MAN-244. Los seis colores de marca vienen medidos del logo en MAN-233;
   todo lo demás se derivó acá y se midió con WCAG 2.1 antes de escribirlo.

   Regla: ningún componente escribe un hex. Si falta un valor, se agrega acá.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---------------------------------------------------------------- marca
     Medidos del logo (MAN-233 · personaje §5.1). No se tocan. */
  --rm-amarillo: #FCCC04;
  --rm-rojo:     #C12D28;
  --rm-tinta:    #0F0D0D;
  --rm-hueso:    #F9F7F4;
  --rm-crema:    #FFF6E3;
  --rm-vino:     #8E2230;

  /* ----------------------------------------------------------- superficies */
  --rm-papel:         #FFF6E3;  /* fondo de página */
  --rm-tarjeta:       #F9F7F4;  /* tarjeta, panel, diálogo */
  --rm-tarjeta-2:     #FFFFFF;  /* panel dentro de una tarjeta, sin borde propio */
  --rm-kraft:         #EADCBC;  /* caja de foto, cartón; tinta encima = 14,27:1 */
  --rm-neutro:        #E9E0CA;  /* chip apagado, control deshabilitado */
  --rm-linea:         #D8CCB0;  /* divisor DECORATIVO 1px. Nunca el único borde de un control. */
  --rm-linea-grafico: #E4D9BF;  /* grilla del gráfico */

  /* ----------------------------------------------------------------- texto
     ratio medido sobre --rm-papel (#FFF6E3) */
  --rm-texto:     #0F0D0D;  /* 18,03:1 */
  --rm-texto-2:   #5C5048;  /*  7,25:1  secundario */
  --rm-texto-3:   #6B6058;  /*  5,68:1  terciario / metadato */
  --rm-texto-inv: #F9F7F4;  /* sobre campos oscuros */

  /* Campos que NO se dan vuelta con el tema, y por eso llevan su propio par.
     El amarillo es luz en las dos caras: la tinta encima sigue siendo tinta,
     y si acá se usara `--rm-texto` el modo oscuro pondría hueso sobre amarillo
     (1,35:1). El pie es la franja más oscura de la página en las dos caras,
     pero en oscuro no puede ser la tinta de marca o desaparece contra el
     papel: por eso es un token propio y no `--rm-tinta`. */
  --rm-sobre-amarillo: #0F0D0D;  /* 12,71:1 sobre #FCCC04 */
  --rm-sobre-accion:   #F9F7F4;  /* 5,35:1 s/rojo · 8,11:1 s/vino */
  --rm-campo-tinta:    #0F0D0D;  /* el bloque de tinta (botón «ofertar», chip «reservado») */
  --rm-sobre-tinta:    #F9F7F4;  /* 17,58:1 */
  --rm-pie-fondo:      #0F0D0D;
  --rm-pie-texto:      #F9F7F4;  /* 17,58:1 sobre el fondo del pie */

  /* --------------------------------------------------------------- estados
     Cada estado viaja SIEMPRE con palabra y forma propias, nunca sólo color. */
  --rm-ok:        #0F5A31;  /* 7,73:1 s/papel · hueso encima 7,77:1 */
  --rm-ok-fuerte: #0B4726;  /* hueso encima 10,10:1 */
  --rm-peligro:   #8E2230;  /* 8,07:1 s/papel · hueso encima 8,11:1 */
  --rm-info:      #19477A;  /* 8,79:1 s/papel · hueso encima 8,83:1 */
  --rm-aviso:     #FCCC04;  /* SÓLO campo, con tinta encima: 12,71:1 */

  /* ---------------------------------------------------------------- acción */
  --rm-accion:         #C12D28;  /* campo; texto hueso encima 5,35:1 */
  --rm-accion-hover:   #A5241F;  /* hueso encima 6,84:1 */
  --rm-accion-activa:  #8A1D19;  /* hueso encima 8,65:1 */
  --rm-amarillo-hover: #E8BC03;  /* tinta encima 10,73:1 */
  --rm-tinta-hover:    #2B241F;  /* hueso encima 14,28:1 */

  /* ------------------------------------------------------------------ foco
     3px, offset 2px. Tinta sobre claro (≥12,7:1); hueso sobre oscuro. */
  --rm-foco:     #0F0D0D;
  --rm-foco-inv: #F9F7F4;
  --rm-foco-ancho: 3px;
  --rm-foco-offset: 2px;

  /* ------------------------------------------------------------- tipografía
     Una familia, dos registros. Archivo es variable (wght 100–900, wdth 62–125):
     el registro «cartel» es el mismo tipo estrechado y engordado, que es
     exactamente lo que hace el logo. Si la distribución no trae el eje wdth,
     el reemplazo es Archivo Narrow (cartel) + Archivo (texto). */
  --rm-fuente-cartel: "Archivo", "Archivo Narrow", "Arial Narrow", system-ui, sans-serif;
  --rm-fuente-texto:  "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --rm-cartel-var: "wdth" 78, "wght" 900;
  --rm-texto-var:  "wdth" 100, "wght" 400;

  /* escala fluida; el display no pasa de 6rem */
  --rm-t-cartel-xl: clamp(2.75rem, 7vw,   5.25rem);  /* precio del minuto, ficha */
  --rm-t-cartel-l:  clamp(2rem,    4.5vw, 3.25rem);  /* títulos de página */
  --rm-t-cartel-m:  clamp(1.5rem,  3vw,   2rem);     /* precio en tarjeta, subtítulos */
  --rm-t-cartel-s:  1.125rem;                        /* etiqueta de campo, botón */
  --rm-t-cuerpo:    1rem;
  --rm-t-cuerpo-s:  0.875rem;
  --rm-t-micro:     0.75rem;                         /* «Lista», «Piso»: versalita rastreada */

  --rm-lh-cartel: 0.92;
  --rm-lh-titulo: 1.15;
  --rm-lh-cuerpo: 1.55;
  --rm-track-cartel: -0.025em;  /* el piso duro es -0,04em; acá no se llega */
  --rm-track-micro:  0.08em;
  --rm-medida: 68ch;            /* ancho de lectura */

  /* --------------------------------------------------------------- espacio
     Escala de 4px. Se usa el token, nunca el píxel suelto. */
  --rm-e0: 2px;
  --rm-e1: 4px;
  --rm-e2: 8px;
  --rm-e3: 12px;
  --rm-e4: 16px;
  --rm-e5: 24px;
  --rm-e6: 32px;
  --rm-e7: 48px;
  --rm-e8: 64px;
  --rm-e9: 96px;

  /* ---------------------------------------------------------------- radios
     Tarjetas 14px. Las píldoras son sólo para controles chicos. */
  --rm-r-panel: 10px;
  --rm-r:       14px;
  --rm-r-chip:  999px;

  /* --------------------------------------------------------------- bordes
     El mundo es «sticker recortado»: borde de tinta grueso, no hairline. */
  --rm-borde:       2px solid var(--rm-tinta);
  --rm-borde-fino:  1px solid var(--rm-linea);
  --rm-borde-grueso:3px solid var(--rm-tinta);

  /* -------------------------------------------------------------- sombras
     Una sola elevación por elemento. La sombra dura (0 de desenfoque) es la
     del logo, y es la que usan tarjetas y botones. Lo que flota sobre la
     página (diálogo, barra fija) suma además una sombra ambiental difusa. */
  --rm-sombra:        3px 3px 0 var(--rm-tinta);
  --rm-sombra-alta:   5px 5px 0 var(--rm-tinta);
  --rm-sombra-flota:  5px 5px 0 var(--rm-tinta), 0 24px 48px -16px rgba(15, 13, 13, 0.38);
  --rm-sombra-barra:  0 -2px 0 var(--rm-tinta), 0 -12px 28px -14px rgba(15, 13, 13, 0.30);

  /* -------------------------------------------------------------- medidas */
  --rm-ancho: 1240px;      /* contenedor de escritorio */
  --rm-ancho-angosto: 720px;
  --rm-toque: 44px;        /* área táctil mínima */

  /* ------------------------------------------------------------ movimiento
     Un solo gesto propio: el sello del precio cuando cambia un dígito.
     Todo lo demás es un cambio de estado de 120 ms. */
  --rm-ease:   cubic-bezier(0.16, 1, 0.3, 1);
  --rm-dur-0:  120ms;
  --rm-dur-1:  220ms;
  --rm-dur-2:  420ms;

  /* -------------------------------------------------------- zonas de la suegra
     Alto CSS por zona (MAN-233 · escenas §1). El ancho lo pone el contenedor. */
  --rm-suegra-mostrador: 180px;
  --rm-suegra-esquina:   240px;
  --rm-suegra-ficha:     160px;
  --rm-suegra-modal:     300px;
}

@media (max-width: 640px) {
  :root {
    --rm-suegra-mostrador: 120px;
    --rm-suegra-esquina:   160px;
    --rm-suegra-ficha:     110px;
    --rm-suegra-modal:     180px;
  }
}

/* ==========================================================================
   Modo oscuro

   El mundo es papel, así que invertirlo no es voltear los valores: un cartel
   de liquidación fotocopiado en negativo no es nada. La traducción honesta es
   **la marquesina de noche**: el mismo cartel, apagada la sala. Los campos
   saturados (amarillo, rojo) NO cambian —son luz, y ahora brillan contra el
   fondo en vez de gritar sobre el papel—; lo que cambia es el papel, que se
   apaga, y el contorno, que pasa de tinta a hueso porque una línea negra sobre
   un fondo negro no existe.

   La sombra dura es el otro problema: en claro es tinta desplazada, y en
   oscuro sería invisible. Acá pasa a hueso, que es exactamente lo que hace una
   mala registración de imprenta y lo que hace el logo. Se declara como color
   aparte (`--rm-sombra-tinta`) para que las cuatro sombras la hereden.

   El amarillo sigue siendo campo, nunca texto, en las dos caras.
   ========================================================================== */
[data-tema="oscuro"] {
  color-scheme: dark;

  /* superficies: el papel se apaga, conserva el calor del crema */
  --rm-papel:         #16120F;
  --rm-tarjeta:       #201A15;
  --rm-tarjeta-2:     #2A231C;
  --rm-kraft:         #3B3024;  /* la caja de foto; texto encima 11,07:1 */
  --rm-neutro:        #2F281F;
  --rm-linea:         #493E31;  /* divisor decorativo */
  --rm-linea-grafico: #3A3127;

  /* texto, medido sobre --rm-papel (#16120F) */
  --rm-texto:     #F6F0E1;  /* 16,38:1 */
  --rm-texto-2:   #CDC2AA;  /* 10,55:1 */
  --rm-texto-3:   #B0A48C;  /*  7,57:1 */
  --rm-texto-inv: #16120F;  /* sobre campos claros; s/amarillo 12,22:1 */

  /* El amarillo no se apagó, así que la tinta encima tampoco cambia. El pie
     baja un punto más que el papel para seguir siendo la franja del fondo. */
  --rm-sobre-amarillo: #0F0D0D;  /* 12,71:1 sobre #FCCC04 */
  --rm-sobre-accion:   #F9F7F4;  /* el rojo no se apagó: el hueso encima tampoco cambia */
  /* El bloque de tinta sí se da vuelta: de noche, un cuadro negro sobre papel
     negro no es un bloque. Pasa a hueso con tinta encima, que es el mismo
     gesto del logo leído en negativo. */
  --rm-campo-tinta:    #F6F0E1;
  --rm-sobre-tinta:    #16120F;  /* 16,38:1 */
  --rm-pie-fondo:      #0B0907;
  --rm-pie-texto:      #F6F0E1;  /* 17,31:1 sobre el fondo del pie */

  /* estados: los campos claros se aclaran, los textos-estado también */
  --rm-ok:        #7FD0A0;  /* 10,14:1 s/papel · tinta encima 8,61:1 */
  --rm-ok-fuerte: #A9E5C4;  /* campo, con --rm-texto-inv encima */
  --rm-peligro:   #F2938C;  /*  8,27:1 s/papel */
  --rm-info:      #9FC2F0;  /* 10,15:1 s/papel */
  --rm-aviso:     #FCCC04;  /* sin cambio: es luz, no tinta */

  /* acción: el rojo de marca aguanta el hueso encima en las dos caras */
  --rm-accion:         #C12D28;  /* hueso encima 5,35:1 */
  --rm-accion-hover:   #D6423C;  /* tinta encima 6,26:1 */
  --rm-accion-activa:  #E4564F;
  --rm-amarillo-hover: #FFD82E;
  --rm-tinta-hover:    #DED6C4;  /* el hueso del campo, un punto más bajo */

  /* foco: hueso sobre oscuro */
  --rm-foco:     #F9F7F4;
  --rm-foco-inv: #16120F;

  /* el contorno y la sombra pasan a hueso: la tinta no existe de noche */
  --rm-borde:        2px solid var(--rm-texto);
  --rm-borde-fino:   1px solid var(--rm-linea);
  --rm-borde-grueso: 3px solid var(--rm-texto);
  --rm-sombra:       3px 3px 0 var(--rm-texto);
  --rm-sombra-alta:  5px 5px 0 var(--rm-texto);
  --rm-sombra-flota: 5px 5px 0 var(--rm-texto), 0 24px 48px -16px rgba(0, 0, 0, 0.72);
  --rm-sombra-barra: 0 -2px 0 var(--rm-texto), 0 -12px 28px -14px rgba(0, 0, 0, 0.64);
}