/* 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");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

: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);

  /* 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;
}

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

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