/* tokens.css — Design system 2026 */

@font-face {
  font-family: "Dosis";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/dosis-latin.woff2") format("woff2-variations"),
       url("../fonts/dosis-latin.woff2") format("woff2");
}

:root {
  color-scheme: dark;

  /* Paleta principal */
  --color-white: #ffffff;
  --color-whitesmoke: #f5f5f5;
  --color-gray-100: #d6d6d6;
  --color-gray-300: #a8a8a8;
  --color-gray-500: #737373;
  --color-gray-700: #2f2f2f;
  --color-gray-900: #181818;
  --color-black: #090909;
  --color-black-soft: #121212;

  /* Secundarios de marca */
  --color-red: #e10600;
  --color-red-soft: #ff3b30;
  --color-yellow: #ffd400;
  --color-green: #16a34a;
  --color-green-soft: #22c55e;

  /* Alias legacy (compatibilidad proyecto) */
  --blanco: var(--color-white);
  --negro: var(--color-black);
  --negro-2: var(--color-black-soft);
  --gris-1: var(--color-gray-900);
  --gris-2: var(--color-gray-700);
  --gris-3: var(--color-gray-300);
  --rojo: var(--color-red);
  --rojo-2: var(--color-red-soft);
  --rojo-3: #ff8a80;
  --ki: var(--color-yellow);

  /*
    Canales sueltos del rojo y el amarillo, para los rgba() de las hojas que
    comparten web y administración. Aquí valen lo de siempre, así el admin no
    se mueve; body.theme-public los reapunta a la paleta cálida.
    --rojo-glow-rgb es el rojo algo más claro que se usa en resplandores.
  */
  --rojo-rgb: 225, 6, 0;
  --rojo-glow-rgb: 229, 57, 53;
  --ki-rgb: 255, 212, 0;
  --verde-rgb: 34, 197, 94;

  /* Rojo de los h2 y títulos de modal, heredado del diseño anterior. */
  --titulo-acento: #dd3432;

  /* Radios solicitados */
  --radius-5: 5px;
  --radius-10: 10px;
  --radius-20: 20px;
  --radius-30: 30px;
  --radius-999: 999px;

  --radius: var(--radius-20);
  --radius-lg: var(--radius-30);
  --radius-xl: 40px;

  /* Tipografía fluida — marca Método Saya */
  --font-sans: "Dosis", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --lh: 1.55;
  --tracking-tight: -0.02em;

  --fs-root-min: 15px;
  --fs-root-max: 18px;
  --fs-root-fluid: clamp(var(--fs-root-min), 0.28vw + 0.88rem, var(--fs-root-max));

  --step--1: clamp(0.84rem, 0.81rem + 0.15vw, 0.95rem);
  --step-0: clamp(1rem, 0.97rem + 0.22vw, 1.14rem);
  --step-1: clamp(1.2rem, 1.12rem + 0.44vw, 1.5rem);
  --step-2: clamp(1.44rem, 1.29rem + 0.74vw, 1.95rem);
  --step-3: clamp(1.73rem, 1.48rem + 1.15vw, 2.45rem);
  --step-4: clamp(2.07rem, 1.69rem + 1.7vw, 3.05rem);

  /* Espaciado fluido */
  --space-2xs: clamp(0.375rem, 0.34rem + 0.17vw, 0.5rem);
  --space-xs: clamp(0.5rem, 0.44rem + 0.28vw, 0.75rem);
  --space-sm: clamp(0.75rem, 0.67rem + 0.39vw, 1rem);
  --space-md: clamp(1rem, 0.87rem + 0.65vw, 1.5rem);
  --space-lg: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
  --space-xl: clamp(2rem, 1.65rem + 1.75vw, 3.25rem);
  --space-2xl: clamp(2.75rem, 2.2rem + 2.6vw, 4.75rem);

  /* Layout */
  --container: 1400px;
  --container-wide: 1380px;
  --g: clamp(12px, 2vw, 24px);
  --pad: clamp(14px, 2vw, 30px);

  /* Motion */
  --t-fast: 0.16s;
  --t: 0.24s;
  --t-slow: 0.42s;
  --easing-spring: cubic-bezier(0.22, 1, 0.36, 1);

  /* Elevación */
  --shadow-1: 0 10px 24px rgba(0, 0, 0, 0.28);
  --shadow-2: 0 20px 50px rgba(0, 0, 0, 0.42);
  --glass-bg: rgba(12, 12, 12, 0.66);
  --glass-blur: 14px;

  /* Z layers */
  --z-header: 50;
  --z-menu: 70;
  --z-modal: 9999;
}

/* ==========================================================================
   Paleta cálida 2026 — web pública
   Base crema en vez de negro/whitesmoke, acento terracota en vez de rojo puro
   y ocre en vez de amarillo neón. Objetivo: una web que invite y genere
   confianza sin perder la energía del entrenamiento.
   ========================================================================== */

:root {
  /* Neutros cálidos */
  --crema: #f7f4ef;
  --arena: #e4dace;
  --tierra: #b6a89a;
  /* Es el gris de los párrafos: va oscuro para pasar AA sobre crema y blanco. */
  --tierra-honda: #6f665e;
  --grafito: #1c1b19;
  --grafito-soft: #24221f;

  /* Acentos */
  /*
    Este tono está elegido para servir en los tres sitios donde aparece: como
    texto sobre crema, como texto sobre las secciones oscuras y como fondo de
    botón con texto blanco. Un terracota más apagado se caía por debajo de 3:1
    sobre el grafito.
  */
  --terracota: #b24d31;
  --terracota-claro: #c25a3c;
  --cielo: #8fb6c9;
  --cielo-hondo: #4f6b7a;
  --sage: #8a9a7b;
  --sage-claro: #9fae8e;
  --ocre: #c8912f;
  /* El ocre normal solo llega a 2.5:1 sobre crema; este es para texto en claro. */
  --ocre-hondo: #7a5a12;

  /* Canales sueltos para brillos y sombras: rgba(var(--terracota-rgb), .3) */
  --terracota-rgb: 178, 77, 49;
  --ocre-rgb: 200, 145, 47;
  --cielo-rgb: 143, 182, 201;
  --sage-rgb: 138, 154, 123;
  --grafito-rgb: 28, 27, 25;
}

/*
  El remapeo va en body.theme-public y no en :root a propósito: el panel de
  administración (body.admin-public-skin) también carga tokens.css y debe
  conservar sus colores actuales.
*/
body.theme-public {
  color-scheme: light;

  --color-white: #ffffff;
  --color-whitesmoke: var(--crema);
  --color-gray-100: var(--arena);
  --color-gray-300: var(--tierra);
  --color-gray-500: var(--tierra-honda);
  --color-gray-700: #4a4540;
  --color-gray-900: #2a2724;
  --color-black: var(--grafito);
  --color-black-soft: var(--grafito-soft);

  --color-red: var(--terracota);
  --color-red-soft: var(--terracota-claro);
  --color-yellow: var(--ocre);
  --color-green: var(--sage);
  --color-green-soft: var(--sage-claro);

  /*
    Los alias legacy hay que repetirlos aquí. Un var() dentro de una custom
    property se sustituye en el elemento donde se declara, así que --rojo ya
    valía #e10600 al heredarse desde :root y no se enteraba de que aquí
    --color-red es otro. Sin estas líneas, los ~37 usos de --rojo y --ki
    seguirían pintando el rojo y el amarillo antiguos.
  */
  --blanco: var(--color-white);
  --negro: var(--color-black);
  --negro-2: var(--color-black-soft);
  --gris-1: var(--color-gray-900);
  --gris-2: var(--color-gray-700);
  --gris-3: var(--color-gray-300);
  --rojo: var(--color-red);
  --rojo-2: var(--color-red-soft);
  --rojo-3: #e0a08f;
  --ki: var(--color-yellow);

  --rojo-rgb: var(--terracota-rgb);
  --rojo-glow-rgb: var(--terracota-rgb);
  --ki-rgb: var(--ocre-rgb);
  --verde-rgb: var(--sage-rgb);
  --titulo-acento: var(--terracota);

  --glass-bg: rgba(28, 27, 25, 0.62);
  --shadow-1: 0 10px 24px rgba(41, 33, 26, 0.16);
  --shadow-2: 0 20px 50px rgba(41, 33, 26, 0.24);
}

html {
  font-size: var(--fs-root-fluid);
}

@media (max-width: 420px) {
  :root {
    --fs-root-min: 14px;
    --fs-root-max: 17px;
  }
}