/* ============================================================================
   RENTAL.DO · SISTEMA DE MARCA · TOKENS. FUENTE ÚNICA DE COLOR Y TIPOGRAFÍA
   La ley vive en stealth/SISTEMA.md. Si algo de aquí la contradice, gana el
   documento. Este archivo lo carga TODA página del sitio, sin excepción, y
   siempre después del <style> propio de la página: así los tokens firmados
   pisan cualquier paleta vieja que la página traiga escrita adentro.

   POR QUÉ EXISTE ESTE ARCHIVO
   El 8 de agosto de 2026 el botón "Reservar" de producción pintaba
   rgb(14,60,96), o sea #0E3C60: el navy de la iteración muerta. La causa no
   fue un hex mal tecleado. Fue que producción llevaba cuatro días servida
   desde un despliegue anterior a la consolidación de marca, y ese despliegue
   ni siquiera incluía marca-huesped.css. El código estaba bien y la pantalla
   estaba mal, que es el peor de los dos casos porque no se ve leyendo.
   De ahí salen dos decisiones:
     1. Los tokens viven en UN archivo que cargan todas las páginas, no
        repetidos dentro de cada <style>.
     2. La verificación se hace contra lo PINTADO y contra la URL viva, no
        contra el código. Está en ops/checks/marca-color.js.

   CÓMO SE USA
     <style> ...lo propio de la página... </style>
     <link rel="stylesheet" href="marca-sistema.css">      <- todas
     <link rel="stylesheet" href="marca-huesped.css">      <- carril huésped
   El orden importa. marca-sistema.css va después del <style> y antes de
   cualquier hoja de la página.

   TIPOGRAFÍA · CLASH DISPLAY, AUTO ALOJADA
   Licencia FFL de Fontshare VERIFICADA (SISTEMA.md 10.3): uso comercial y
   auto alojado permitidos. El papel está en assets/fuentes/FFL.txt junto a
   los woff2. Se sirve desde nuestro origen, así que la CSP actual
   (font-src 'self') ya la permite. Figtree queda detrás en la pila como
   respaldo del instante de carga: la página nunca se rompe si la fuente
   tarda.
   ============================================================================ */

/* Clash Display, auto alojada. Dos pesos de la misma familia y nada más:
   500 para display grande, 600 para marca y textos chicos (SISTEMA.md 3). */
@font-face{
  font-family:"Clash Display";
  src:url("assets/fuentes/ClashDisplay-Medium.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Clash Display";
  src:url("assets/fuentes/ClashDisplay-Semibold.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}

:root{
  /* ---- la paleta firmada. seis valores, papel fijo (SISTEMA.md 2) ---- */
  --brisa:#EAF6F5;        /* superficie madre. larimar al 14% */
  --brisa-2:#F3FAF9;      /* tarjeta sobre brisa */
  --azafran:#F4BA1F;      /* superficie cálida. dorado, no limón */
  --flamboyan:#E24A2B;    /* la acción. UNA vez por pantalla */
  --larimar:#7FC4C6;      /* alivio frío. información, nunca acción */
  --teal-hondo:#0E4C52;   /* el ancla. peso serio, en familia */
  --tinta:#140A06;        /* texto principal */
  --tinta-62:#645D5B;     /* texto secundario */

  /* derivados para texto, medidos en el sistema */
  --flamboyan-d:#B93A1F;  /* enlaces sobre claro · 5.15 AA */
  --larimar-d:#0A5E5E;    /* dato sobre claro · 6.85 AA */
  --cal:#F4EADC;          /* SOLO sobre color saturado y oscuro (foto,
                             teal hondo, flamboyán). Jamás sobre brisa. */

  --filete:rgba(20,10,6,.10);        /* 1px sobre claro */
  --filete-fuerte:rgba(20,10,6,.18); /* separador que sí tiene que verse */

  /* ---- contraste medido (SISTEMA.md 2), no afirmado ----
     tinta/brisa 17.66 AAA · tinta/azafrán 11.05 AAA · tinta/flamboyán 4.88 AA
     teal-hondo/brisa 8.74 AAA · cal/teal-hondo 8.12 AAA
     flamboyan-d/brisa 5.15 AA · tinta-62/brisa 5.83 AA · larimar-d/brisa 6.85 AA
     flamboyán/brisa 3.62 solo relleno · blanco/flamboyán 4.00 PROHIBIDO */

  /* ---- estados. no son colores nuevos: son las mismas tintas del sistema
     bajadas en alfa sobre brisa. Cada par viene medido, no supuesto. ---- */
  --aviso-fondo:rgba(226,74,43,.10);   /* = #E9E5E1 · flamboyan-d encima 4.54 AA */
  --aviso-texto:var(--flamboyan-d);
  --espera-fondo:rgba(244,186,31,.26); /* = #EDE6BD · tinta encima 15.48 AAA
                                          (regla 2: sobre azafrán, tinta) */
  --espera-texto:var(--tinta);
  --ok-fondo:rgba(127,196,198,.14);    /* = #DBEFEE · larimar-d encima 6.34 AA */
  --ok-texto:var(--larimar-d);
  --neutro-fondo:var(--brisa-2);       /* tinta-62 encima 6.09 AA */
  --neutro-texto:var(--tinta-62);

  /* ---- tipografía ---- */
  --ui:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --display:"Clash Display","Figtree",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;

  /* ---- movimiento (SISTEMA.md 4). Curva única. ---- */
  --ease:cubic-bezier(.16,1,.3,1);
  --guira:22s;            /* temblor continuo, solo foto de fondo */
  --tambora:420ms;        /* golpe de entrada */
  /* bajo: la respuesta al dedo. 120ms, scale .97, ease-out. Un solo valor
     para todo lo que se toca. Vive como token porque ya pasó lo contrario:
     había cuatro reglas :active en propiedad.html con .92, .97 y dos .98, o
     sea cuatro respuestas distintas al mismo gesto. Eso no se lee como
     variedad, se lee como descuido. */
  --bajo:.97;

  /* ---- radios del sistema: acción 999 · tarjeta 20 · entrada 14 ---- */
  --r-card:20px;
  --r-input:14px;

  /* ---- sombra: dos capas, tono de la superficie, nunca gris neutro ---- */
  --shadow-1:0 1px 2px rgba(14,76,82,.10), 0 10px 24px rgba(14,76,82,.14);
  --shadow-2:0 2px 5px rgba(14,76,82,.12), 0 22px 48px rgba(14,76,82,.18);

  /* ======================================================================
     REMAPEO DE LOS TOKENS HEREDADOS
     Las páginas están escritas contra estos nombres viejos. Reapuntarlos
     aquí voltea el sitio entero de una vez y cubre lo que se escriba
     después usando los mismos nombres. Los nombres se conservan a
     propósito: renombrarlos en siete archivos a mano es cómo se cuelan los
     errores. El nombre miente un poco; el color, no.
     ====================================================================== */

  /* superficies */
  --bg:var(--brisa);
  --bg-alt:var(--brisa-2);
  --sea:var(--brisa-2);
  --paper:var(--brisa-2);

  /* texto */
  --ink:var(--tinta);
  --body:var(--tinta-62);
  --muted:var(--tinta-62);
  --faint:var(--tinta-62);   /* #93A0A8 no llegaba a AA sobre claro */

  /* filetes */
  --line:var(--filete);
  --linea:var(--filete);
  --rule:var(--filete);
  --rule-strong:var(--filete-fuerte);

  /* el navy de la iteración muerta. Lo que era "azul de marca" es el ancla. */
  --navy:var(--teal-hondo);
  --navy-deep:var(--teal-hondo);
  --deep:var(--teal-hondo);

  /* el teal viejo #56BEBD no es el larimar del sistema */
  --teal:var(--larimar);
  --teal-ink:var(--larimar-d);
  --teal-tint:var(--ok-fondo);
  --teal-pale:var(--ok-fondo);

  /* estados con nombre viejo */
  --danger:var(--aviso-texto);
  --oro:var(--tinta);            /* regla 2: sobre azafrán el texto es tinta */
  --oro-pale:var(--espera-fondo);
  --verde:var(--teal-hondo);     /* el dinero que queda es el ancla */
  --verde-pale:var(--ok-fondo);

  /* el degradado metálico murió con el navy: el sistema no tiene metal */
  --metal:none;
  --metal-sh:0 12px 30px rgba(226,74,43,.25);
  --metal-sh-hi:0 14px 34px rgba(226,74,43,.3);

  /* familias */
  --font:var(--ui);
  --font-display:var(--display);
}

/* La superficie madre. color-scheme:light evita que el navegador invierta
   controles y meta un azul de sistema que no es nuestro. */
html{ background:var(--brisa); color:var(--tinta); color-scheme:light; }

/* Titulares en Clash Display (SISTEMA.md 3, F3). Hasta ahora cinco páginas
   llevaban el lockup en Clash y los titulares en Figtree 800: la marca
   firmaba con una letra y hablaba con otra. La escala manda el peso: de
   24px hacia arriba va 500 con -.024em, debajo va 600 con -.026em. Los h1
   del sitio pasan de 24px en el ancho de referencia y los h2 no, así que
   el corte cae limpio entre los dos.

   Esta regla es de baja especificidad a propósito (un elemento). Cualquier
   página que ya resuelva su display con una clase (.serif en el carril
   huésped) le gana sin tener que tocar nada. */
h1{ font-family:var(--display); font-weight:500; letter-spacing:-.024em; }
h2{ font-family:var(--display); font-weight:600; letter-spacing:-.026em; }

/* Nunca #FFFFFF ni #000000 (SISTEMA.md 2, regla 4). El azul de enlace por
   defecto del navegador tampoco es del sistema. */
a{ color:var(--flamboyan-d); }

/* Los controles de formulario no heredan color solos: el navegador les pone
   su propio buttontext, que es negro puro. Lo encontró la puerta VIVO del
   candado leyendo el color computado, no el código: en el CSS no había
   ningún negro escrito y aun así había negro en pantalla. */
button, input, select, textarea, optgroup{ color:inherit; }
::selection{ background:var(--larimar); color:var(--tinta); }
:root{ accent-color:var(--flamboyan); }