/**
 * Variables de diseño de Reddie.
 *
 * Todos los colores, tamaños y espaciados del proyecto viven aquí.
 * Ninguna otra hoja de estilos debe escribir un color a mano.
 * Cambiar un valor aquí lo actualiza en toda la aplicación.
 */

:root {
	/* --- Marca --- */
	--rd-primary: #d85a36;
	--rd-primary-hover: #c44d2c;
	--rd-primary-active: #b04425;
	--rd-logo-orange: #e46048;

	/* --- Texto ---
	   Tres grados: el principal, el de apoyo y el más callado. Los dos
	   de apoyo se oscurecieron —#87766c pasó a #53443c y #a89a91 a
	   #6d5b4f— y conviene dejar escrito el porqué, porque son dos
	   colores que se tocan con miedo: los usa media web.

	   LO QUE PASABA. Los dos estaban pensados mirando la tarjeta más
	   clara, la de Foco, y sobre ella ya se quedaban cortos: el de
	   apoyo daba 4,08 y el callado 2,57, cuando un texto pequeño
	   necesita 4,5. Y la tarjeta de Foco es el mejor caso: el mismo
	   texto cae también sobre la tarjeta teñida de cada tema —el azul
	   de Orden, el lila de Descanso— y ahí bajaban a 3,55 y 2,23. Son
	   los colores de «.rd-habitos__sub», «.rd-habitos__pista»,
	   «.rd-habitos__frec», «.rd-linkbutton», las fechas de Comunidad,
	   los pies de los logros y los títulos de grupo de Ajustes: no es
	   un rincón, es el segundo plano de toda la aplicación.

	   CÓMO SE HAN ELEGIDO. Midiendo contra las veinte superficies
	   claras que existen de verdad —tarjeta, tarjeta alternativa,
	   tarjeta honda y ventana de los cinco temas— y quedándose con la
	   peor de las veinte, que es la tarjeta honda de Descanso, ese lila
	   del registro del diario. Ahí el de apoyo da ahora 6,62 y el
	   callado 4,59; sobre la tarjeta de Foco, 8,74 y 6,06. Elegirlos
	   mirando solo la tarjeta clara es lo que dejó fuera el registro
	   del diario la primera vez, con «Hoy» y «0 de 6 elegidas» en 4,10.

	   Y LA JERARQUÍA, QUE ES LA MITAD DEL TRABAJO. Un texto de apoyo
	   que se pone tan negro como el principal deja de ser de apoyo, y
	   entonces la pantalla no se lee de un vistazo: todo pesa igual. Lo
	   que separa los tres grados no es el contraste sino el brillo que
	   ve el ojo, y en esa escala —de 0 negro a 100 blanco— van 16, 30 y
	   40, tres escalones parejos. Antes iban 16, 51 y 65: los peldaños
	   se han acortado, pero siguen siendo tres y se siguen viendo tres.
	   Más juntos no pueden ir: el callado ya está en el límite de lo
	   que aguanta el lila del diario.

	   El tono no se mueve: los dos siguen siendo el mismo marrón cálido
	   de 22 grados. Lo que sube un punto es la saturación, del 11 % al
	   16 %, por lo mismo que lo hace «tono()» en el plugin: un color
	   pastel oscurecido a secas se vuelve gris, y un gris entre tanto
	   crema se ve sucio.

	   El callado NO es un color para adornos ni para letra grande: se
	   miró de dónde sale y lleva texto normal y pequeño —«Días
	   registrados en tu diario», «hace 1 segundo», «Disponible a partir
	   del nivel 8», los nombres de los grupos de Ajustes—, así que se
	   le pide lo mismo que a cualquier otro texto, 4,5.

	   De noche estos dos no valen —sobre el azul hay que ir al revés,
	   hacia el blanco— y los reescribe el plugin en «css_oscuro()».

	   Y HAY UN SEGUNDO SITIO DONDE SE ESCRIBEN, QUE CONVIENE SABER.
	   Cuatro de las cinco paletas de la tienda —Bosque, Océano,
	   Lavanda y Atardecer; la de casa no imprime nada— traen sus
	   propios valores para estas dos variables, y el plugin los
	   imprime DESPUÉS de esta hoja, en
	   «Reddie_Palettes::css_variables()», así que mandan ellos: con
	   una de esas cuatro puesta, lo de aquí no llega a la pantalla.
	   Medido con Bosque encima del registro del diario, «Hoy» se queda
	   en 3,31 el de apoyo y 2,11 el callado. Sus colores salieron con
	   la misma cuenta antigua que estos dos —mirando solo la tarjeta
	   más clara—, así que les toca la misma revisión; hasta entonces,
	   lo de arriba solo vale para quien lleve la paleta de casa. En
	   Calma no pasa: allí «css_oscuro()» llega después de la paleta y
	   vuelve a poner las suyas. */
	--rd-ink: #3a2116;
	--rd-ink-soft: #53443c;
	--rd-ink-muted: #6d5b4f;
	--rd-outline: #4e3018;


	/* --- Superficies --- */
	--rd-bg: #fdf3ec;
	--rd-surface: #fdf8f4;
	--rd-surface-alt: #f8ede4;
	--rd-highlight: #f8d6c2;
	--rd-badge-bg: #f6decc;

	/* EL FONDO DE LOS CAMPOS DE ESCRIBIR.

	   Tiene su propia variable y no usa «surface» por un motivo: en
	   papel, un campo donde se escribe es MÁS claro que la tarjeta que
	   lo contiene, no igual. Blanco sobre crema se lee como un hueco
	   donde meter algo.

	   Y hace falta que sea variable, no un blanco fijo, porque con un
	   fondo de pantalla puesto la letra se vuelve blanca —lo hace
	   «Reddie_Backgrounds»— y un blanco fijo aquí dejaba el campo
	   ilegible: letra blanca sobre fondo blanco. Alba, 10-09-2026: «el
	   bocadillo donde escribes "Cuéntame más" que tenga un fondo más
	   oscuro, para que se vean bien las letras blancas». */
	--rd-input-bg: #fff;

	/* --- Bordes --- */
	--rd-border: #ecd8c9;
	--rd-border-strong: #dcc0ad;

	/*
	 * Los colores de los estados de ánimo NO se escriben aquí.
	 * Los decide el plugin (Reddie_Moods) porque también los necesita
	 * para dibujar las caras, y se inyectan en la página como
	 * --rd-mood-1 … --rd-mood-5. Si se copiaran aquí, tarde o temprano
	 * dejarían de coincidir: ya pasó una vez.
	 */

	/* --- Cielo de la landing --- */
	--rd-sky-top: #060b1f;
	--rd-sky-mid: #0d1738;
	--rd-sky-bottom: #16224d;
	--rd-sky-star: #ffffff;
	--rd-sky-glow: #b9d1ff;
	--rd-sky-ink: #ffffff;
	--rd-sky-ink-soft: rgba(255, 255, 255, 0.74);
	--rd-sky-link: #ffb08c;
	--rd-sky-card: rgba(11, 19, 45, 0.78);
	--rd-sky-field: rgba(255, 255, 255, 0.08);
	--rd-sky-ok-bg: rgba(95, 184, 126, 0.18);
	--rd-sky-ok-ink: #a9e7be;
	--rd-sky-error-bg: rgba(216, 90, 54, 0.24);
	--rd-sky-error-ink: #ffbaa4;
	--rd-sky-veil: rgba(255, 255, 255, 0.18);
	--rd-sky-line: rgba(255, 255, 255, 0.42);
	--rd-sky-veil-soft: rgba(255, 255, 255, 0.08);
	/* Sombra en dos capas: una pegada a la letra para el contorno y otra
	   ancha para separarla del cielo aunque pase una estrella por detrás. */
	--rd-sky-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 6px 22px rgba(0, 0, 0, 0.75);

	/* --- Gráfica --- */
	/* El rojo de la línea del ánimo. Este es el valor de DÍA; de noche
	   hay otro, justo debajo del «:root», porque sobre el azul de Calma
	   este no se ve. El porqué y las cuentas están allí.

	   ANTES ERA «#de4a1c», un naranja quemado, y se pedía que la línea
	   fuera más llamativa. El problema no era que fuese poco intensa:
	   era que se parecía demasiado al coral de la propia web —los
	   botones, los títulos, la cabecera—, así que la línea se leía como
	   un adorno más de la pantalla en vez de como el dato. Cambiarla de
	   sitio en el círculo de color es lo que la hace saltar: este rojo
	   ya no es «el color de Reddie», es el color de tu ánimo.

	   Y de paso se ve mejor: contra el recuadro hundido pasa de 3,87 a
	   4,56, y contra el peor de los fondos de la tienda de 3,59 a 4,23.
	   El mínimo exigible a un objeto de una gráfica es 3. */
	--rd-chart-line: #e4002b;

	/* --- Progreso --- */
	--rd-flame: #f58a2e;
	--rd-frost: #3e9bdd;
	--rd-star: #f5c518;

	/* --- Medallas del podio --- */
	--rd-gold: #d9a209;
	--rd-silver: #9aa3aa;
	--rd-bronze: #a9724a;

	/* --- Verificación --- */
	--rd-verified: #2A7FD4;

	/* --- Mensajes --- */
	--rd-success-bg: #e7f6ec;
	--rd-success-ink: #1f6b3a;
	--rd-error-bg: #fdeae7;
	--rd-error-ink: #9c3521;

	/* --- Tipografía --- */
	--rd-font-display: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--rd-weight-display: 800;
	--rd-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--rd-size-xs: 0.8125rem;
	--rd-size-sm: 0.9375rem;
	--rd-size-base: 1.0625rem;
	--rd-size-lg: 1.1875rem;
	--rd-size-xl: 1.75rem;
	--rd-size-display: clamp(2.5rem, 5.5vw, 4.25rem);

	--rd-leading-tight: 1.05;
	--rd-leading-snug: 1.35;
	--rd-leading-normal: 1.6;

	/* --- Espaciado --- */
	--rd-space-1: 0.25rem;
	--rd-space-2: 0.5rem;
	--rd-space-3: 0.75rem;
	--rd-space-4: 1rem;
	--rd-space-5: 1.5rem;
	--rd-space-6: 2rem;
	--rd-space-7: 3rem;
	--rd-space-8: 4rem;

	/* --- Formas --- */
	--rd-radius-sm: 10px;
	--rd-radius-md: 14px;
	--rd-radius-lg: 24px;
	--rd-radius-pill: 999px;

	/* --- Sombras --- */
	--rd-shadow-card: 0 18px 50px rgba(120, 60, 35, 0.08);
	--rd-shadow-focus: 0 0 0 3px rgba(216, 90, 54, 0.22);

	/* --- Medidas --- */
	--rd-container: 1180px;
	--rd-transition: 160ms ease;
}

/* ==========================================================
   El rojo de la gráfica, de noche
   ==========================================================
   Es el mismo arreglo que progreso.css le hizo al verde de los hábitos
   y por el mismo motivo: un color, dos fondos opuestos —uno casi
   blanco y otro casi negro—, no salen las cuentas. Con el verde
   arreglado y este no, la pantalla de Progreso se quedaba a medias:
   una línea que se ve y otra que no, en la misma gráfica.

   LO QUE PASABA. Con el fondo Calma puesto, la línea del ánimo daba
   1,78 contra el recuadro de la gráfica de abajo, y su muestra en la
   leyenda 2,62 contra la tarjeta, cuando el mínimo para una raya o un
   cuadradito de color es 3. La gráfica de arriba, la misma línea sobre
   la tarjeta, otro 2,62. No es una avería nueva ni una regresión: este
   rojo lleva aquí desde el principio y el tema de noche llegó después.

   CÓMO SE MIDE ESTO, QUE ES DONDE SE FALLA. En Calma no hay ningún
   color plano debajo de la línea. El recuadro hundido es blanco al
   13 %, y está sobre una tarjeta que es azul al 88 %, que a su vez
   está sobre el #1c2a4d de la ventana. Hay que componer las tres capas
   —salen (71, 86, 121), un azul medio— y medir contra eso. Tomar la
   capa de arriba por su valor, como si fuera blanco, da números
   tranquilos y falsos: sale que la línea se ve, y no se ve.

   EL VALOR. Mismo tono que el de día, 14 grados, para que siga siendo
   el rojo de la casa y no otro color. La saturación sube al máximo,
   que es lo que hacen todos los cálidos de la noche —el coral de los
   botones, el de los avisos—, y la luz sube hasta donde empieza a
   verse: 3,65 contra el recuadro, 5,37 contra la tarjeta y 7,03 contra
   el azul pelado. Sigue siendo rojo y sigue siendo pastel, que es el
   aire de toda la web.

   Ese 3,65 no es un número cualquiera: es el mismo que da el verde de
   noche (3,67). Las dos líneas de la gráfica de abajo pesan lo mismo
   en el ojo, y eso importa tanto como llegar al mínimo. Una más fuerte
   que la otra se lee como si fuera la importante, y aquí ninguna lo
   es.

   Se cuelga de «body.rd-oscuro», la marca que functions.php le pone al
   body cuando el fondo elegido es Calma, igual que el verde. Y por lo
   mismo no se usa «prefers-color-scheme»: aquí la noche no la decide
   el sistema operativo, la decide quien elige Calma en la tienda.

   Y se cambia el token, no cada regla, porque este rojo lo comparten
   tres sitios: la gráfica de arriba de Progreso y la de Evolución, que
   lo cogen desde evolution.css, y la de abajo de Progreso, que lo coge
   a través de «--rd-animo-linea» en progreso.css. Tocar uno solo
   volvería a dejar la pantalla a medias.

   Los otros cinco fondos de la tienda son claros y se quedan con el de
   día, que allí llega de sobra. Medidos los cinco contra el recuadro,
   que es donde peor lo tiene: Rumbo 3,77, Foco 3,53, Orden 3,49,
   Creatividad 3,42 y Descanso 3,36. El peor es el mismo fondo que le
   toca peor al verde, y por la misma razón: el lila tiñe la tarjeta.
   ========================================================== */

body.rd-oscuro {
	/* El mismo rojo, subido de luz para el fondo de noche: mismo tono
	   (348°) que el de día, así la línea es reconociblemente la misma en
	   los dos temas. Contra el recuadro hundido de Calma da 3,39 y
	   contra la tarjeta 5,03, por encima del 3 que hace falta.

	   No se puede usar el de día aquí —sobre el azul da 1,3— ni este de
	   día —sobre el crema da 2,1—. Por eso son dos y no uno. */
	--rd-chart-line: #ff8fa8;
}

/* ==========================================================
   La escala del móvil
   ==========================================================
   Toda la web se dibuja con estas medidas, y había una sola: la del
   ordenador. En un monitor de 27 pulgadas una letra de 17 píxeles es
   cómoda; en un teléfono, con la pantalla a un palmo de la cara, la
   misma letra se ve enorme.

   El primer intento bajó las letras un punto y los huecos poco más, y
   no se notó nada. Con razón: un seis por ciento no se ve. Aquí se
   corta de verdad, porque el problema no era de matiz.

   Y se corrige en las variables porque casi todo está escrito con
   ellas: cambiarlas una vez cambia la aplicación entera de forma
   proporcionada.

   Los huecos bajan mucho más que las letras. Lo que sobra en un
   teléfono no es tamaño de letra —hay que poder leer— sino aire entre
   las cosas. Reducir la letra hasta que quepa todo es el error
   clásico, y acaba en una pantalla llena de texto ilegible.
   ========================================================== */

@media (max-width: 767px) {
	:root {
		/*
		 * Las letras.
		 *
		 * El cuerpo se queda en 16 y de ahí no baja: por debajo de esa
		 * medida, un iPhone hace zoom solo al tocar un campo de texto y
		 * la pantalla se descoloca. Lo que sí baja de verdad son los
		 * títulos, que a 28 píxeles ocupaban tres renglones para decir
		 * dos palabras.
		 */
		--rd-size-xs: 0.75rem;
		--rd-size-sm: 0.875rem;
		--rd-size-base: 1rem;
		--rd-size-lg: 1.0625rem;
		--rd-size-xl: 1.25rem;
		--rd-size-display: clamp(1.85rem, 8vw, 2.4rem);

		/*
		 * Los huecos, a la mitad a partir del cuarto escalón.
		 *
		 * Son los que separan bloques enteros, y en un móvil un hueco
		 * de cuatro centímetros entre dos tarjetas es una tarjeta que
		 * no se ve.
		 */
		--rd-space-3: 0.5rem;
		--rd-space-4: 0.75rem;
		--rd-space-5: 1rem;
		--rd-space-6: 1.25rem;
		--rd-space-7: 1.5rem;
		--rd-space-8: 2rem;

		/* Las esquinas, menos redondas: en una tarjeta pequeña, un
		   radio grande se come las esquinas del contenido. */
		--rd-radius-md: 12px;
		--rd-radius-lg: 16px;
	}
}