/* ============================================================================
   TOKENS — el único archivo de diseño
   ----------------------------------------------------------------------------
   Aquí vive TODO lo que se puede ver: colores, tamaños, tipografía, tiempos,
   curvas, sombras y los parámetros del cielo. Ningún otro archivo (ni CSS ni
   JS) puede escribir un color, un tamaño o una duración literal.

   Hay dos capas, y el orden importa:

     1. PRIMITIVOS — la paleta cruda. Nombres de cosas: "noche-900", "hueso-100".
        No dicen para qué sirven. Solo se usan dentro de este archivo.

     2. SEMÁNTICOS — nombres de función: "superficie-carta", "texto-tenue".
        Es lo ÚNICO que pueden usar los componentes.

   Por qué dos capas: si un componente usa --c-noche-900 directamente, el día
   que quieras cambiar el estilo entero tendrías que ir componente por
   componente. Con la indirección, cambias a qué apunta cada semántico aquí y
   el resto del proyecto se entera solo.

   Para cambiar el estilo completo: reescribe el bloque SEMÁNTICOS.
   Para retocar un color: cambia su primitivo.
   ========================================================================== */

:root {

  /* ── 1. PRIMITIVOS ──────────────────────────────────────────────────── */

  /* Noche: el cielo del umbral */
  --c-noche-900: #070911;
  --c-noche-800: #0a0e17;
  --c-noche-700: #0d1119;
  --c-velo-azul: 86 110 150;      /* rgb suelto, para componer con alfa */
  --c-velo-violeta: 122 104 150;
  --c-velo-rosa: 196 132 162;     /* el punto de rosa del cielo */
  --c-estrella: 255 255 255;

  /* Violeta profundo: el color de acción. Ni negro ni neutro. */
  --c-violeta-900: #2a2340;
  --c-violeta-700: #453a63;

  /* Hueso: la carta */
  --c-hueso-100: #fbfaf7;
  --c-hueso-200: #f0efeb;
  --c-hueso-200-suelto: 240 239 235;   /* el mismo, en rgb suelto */
  --c-hueso-300: #eceae4;
  --c-hueso-400: #eae9e4;

  /* Líneas */
  --c-linea-100: #e7e6e1;
  --c-linea-200: #e4e3de;
  --c-linea-300: #e0dfd9;
  --c-linea-400: #d5d4ce;
  --c-linea-500: #d3d2cc;
  --c-linea-600: #c2c6c0;

  /* Tinta y grises sobre claro */
  --c-tinta-900: #14161a;
  --c-tinta-600: #3b3f44;
  --c-gris-700: #71756f;
  --c-gris-600: #8b8f8a;
  --c-gris-500: #9a9e98;
  --c-gris-400: #a8aca6;

  /* Grises sobre noche */
  --c-noche-texto: #eceae4;
  --c-noche-gris-400: #a3abbd;
  --c-noche-gris-500: #8d95a8;

  --c-blanco: #fff;
  --c-sombra: 0 0 0;
  --c-tinta-suelta: 20 22 26;   /* rgb suelto de la tinta, para alfas */
  --c-horizonte-alto: 10 14 22;
  --c-horizonte-bajo: 9 12 18;

  /* Espacio */
  --e-0: 0px;
  --e-1: 4px;
  --e-2: 7px;
  --e-3: 9px;
  --e-4: 12px;
  --e-5: 14px;
  --e-6: 16px;
  --e-7: 24px;
  --e-8: 30px;
  --e-9: 34px;
  --e-10: 40px;
  --e-11: 56px;

  /* Tipografía */
  --f-familia: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-peso-claro: 300;
  --f-peso-normal: 400;
  --f-peso-medio: 500;
  --f-xs: 10.5px;
  --f-s: 12.5px;
  --f-sm: 13.5px;
  --f-m: 15px;
  --f-md: 15.5px;
  --f-l: 17px;
  --f-xl: 46px;
  --f-alto-apretado: 1.22;
  --f-alto-normal: 1.6;
  --f-espaciado-titulo: -0.02em;
  --f-espaciado-ancho: 0.04em;

  /* Radios */
  --r-s: 4px;
  --r-m: 8px;
  --r-l: 16px;
  --r-xl: 30px;
  --r-pastilla: 27px;
  --r-circulo: 50%;

  /* Cortes responsivos.
     Ojo: CSS no admite var() dentro de @media, así que en los componentes el
     número va escrito. Se declaran aquí igualmente porque son una decisión de
     diseño, y tests/tokens.test.js comprueba que ningún @media use un corte
     que no esté en esta lista. */
  --corte-estrecho: 900px;
  --corte-movil: 640px;

  /* Medidas de pieza */
  --m-carta-ancho: 1104px;
  --m-carta-alto: 716px;
  --m-panel-ancho: 392px;
  --m-simbolo: 70px;
  --m-simbolo-estrecho: 58px;
  --m-simbolo-movil: 52px;
  --m-escenario-estrecho: 28dvh;
  /* En estrecho la zona de la imagen tiene un alto FIJO: si dependiera del
     contenido, la carta daría un salto al poner la imagen. */
  --m-escenario-movil: 24dvh;
  --m-margen-ventana-movil: 26px;
  --m-miniatura-alto-movil: 54px;
  --m-simbolo-dibujo: 32px;
  --m-numero: 19px;
  --m-miniatura-ancho: 54px;
  --m-miniatura-alto: 62px;
  --m-accion-alto: 54px;
  --m-anillo: 360px;
  --m-difuminado-alto: 180px;   /* cuánto abarca la banda de luz */
  --m-trazo-simbolo: 1.35;

  /* Tiempo */
  --t-instante: 0.2s;
  --t-retardo-2: 0.15s;
  --t-retardo-3: 0.3s;
  --t-rapido: 0.22s;
  --t-medio: 0.45s;
  --t-entrada: 0.7s;
  --t-lento: 1.2s;
  --t-respiracion: 6s;
  --t-parpadeo: 7s;
  --t-aplicando: 2800ms;          /* lo lee el JS: cuánto dura el aplicar */

  /* Curvas */
  --curva-suave: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --curva-calma: ease-in-out;

  /* Cielo (lo lee el JS al generar las estrellas) */
  --cielo-lejanas: 420;
  --cielo-cercanas: 70;
  --cielo-semilla: 7;
  --cielo-alfa-lejana-min: 0.14;
  --cielo-alfa-lejana-max: 0.4;
  --cielo-alfa-cercana-min: 0.5;
  --cielo-alfa-cercana-max: 0.9;
  --cielo-estrella-lejana: 1px;
  --cielo-estrella-cercana: 2px;
  --cielo-horizonte-alto: 220px;
  /* El cielo gira como una bóveda: todo el campo rota despacio alrededor de un
     eje que queda por debajo de la pantalla, así que cada estrella describe un
     arco y las de cerca del eje se mueven menos que las de arriba. No es una
     traslación: nada se desplaza en línea recta.
     Para que se mueva más: sube el giro o baja el tiempo. */
  --cielo-eje-x: 50vw;
  --cielo-eje-y: 140vh;
  --cielo-giro: 5deg;
  --cielo-deriva: 210s;
  --cielo-giro-cercanas: 11deg;
  --cielo-deriva-cercanas: 130s;


  /* ── 2. SEMÁNTICOS ──────────────────────────────────────────────────── */
  /* Lo único que pueden usar los componentes. */

  /* Fondos y superficies */
  --fondo-umbral: linear-gradient(
    180deg,
    var(--c-noche-900) 0%,
    var(--c-noche-800) 55%,
    var(--c-noche-700) 100%
  );
  --fondo-velo-bajo: radial-gradient(
    120% 80% at 50% 108%,
    rgb(var(--c-velo-azul) / 0.3) 0%,
    rgb(var(--c-velo-azul) / 0) 62%
  );
  --fondo-velo-alto: radial-gradient(
    90% 60% at 78% -10%,
    rgb(var(--c-velo-violeta) / 0.22) 0%,
    rgb(var(--c-velo-violeta) / 0) 60%
  );
  /* El punto de rosa. Súbele o bájale el alfa para que se note más o menos. */
  --fondo-velo-rosa: radial-gradient(
    70% 50% at 22% 82%,
    rgb(var(--c-velo-rosa) / 0.16) 0%,
    rgb(var(--c-velo-rosa) / 0) 65%
  );
  --superficie-carta: var(--c-hueso-100);
  /* La zona de la imagen es translúcida: el cielo se ve también dentro de la carta. */
  --superficie-escenario: rgb(var(--c-hueso-200-suelto) / 0.4);
  --superficie-simbolo: var(--c-blanco);
  --superficie-simbolo-activo: var(--c-violeta-900);

  /* Texto sobre la noche */
  --texto-noche: var(--c-noche-texto);
  --texto-noche-tenue: var(--c-noche-gris-400);
  --texto-noche-apunte: var(--c-noche-gris-500);

  /* Texto sobre la carta */
  --texto-principal: var(--c-tinta-900);
  --texto-tenue: var(--c-gris-600);
  --texto-apagado: var(--c-gris-500);
  --texto-secundario: var(--c-gris-700);
  --texto-marcador: var(--c-gris-400);

  /* Bordes */
  --borde-carta: rgb(var(--c-estrella) / 0.07);
  --borde-panel: var(--c-linea-100);
  --borde-sutil: var(--c-linea-300);
  --borde-simbolo: var(--c-linea-200);
  --borde-simbolo-hover: var(--c-linea-600);
  --borde-marcado: var(--c-linea-500);
  /* La zona de la imagen es translúcida y oscura: lo que va encima de ella
     se escribe en claro, no en tinta. */
  --borde-hueco: rgb(var(--c-estrella) / 0.38);
  --texto-escenario: var(--c-hueso-300);
  --texto-escenario-tenue: rgb(var(--c-estrella) / 0.6);
  --texto-escenario-fuerte: var(--c-blanco);
  --borde-hueco-fuerte: var(--c-blanco);

  /* Acción principal */
  --accion-fondo: var(--c-violeta-900);
  --accion-texto: var(--c-hueso-100);
  --accion-fondo-hover: var(--c-violeta-700);
  --accion-fondo-inactiva: var(--c-hueso-400);
  --accion-texto-inactiva: var(--c-gris-400);
  --accion-secundaria-borde: var(--c-linea-500);
  --accion-secundaria-hover: #f2f1ed;
  --accion-umbral-fondo: var(--c-hueso-300);
  --accion-umbral-texto: var(--c-noche-900);
  --accion-umbral-hover: var(--c-blanco);

  /* Símbolos */
  --simbolo-trazo: currentColor;
  --simbolo-color: var(--c-gris-500);
  --simbolo-color-activo: var(--c-tinta-900);
  --simbolo-color-activo-dibujo: var(--c-hueso-100);

  /* Sombras */
  --sombra-carta: 0 60px 120px -50px rgb(var(--c-sombra) / 0.85);
  --sombra-imagen: 0 30px 60px -40px rgb(var(--c-tinta-suelta) / 0.6);

  /* El momento de aplicar */
  --aplicando-anillo: rgb(var(--c-tinta-suelta) / 0.32);
  /* La banda de luz que recorre la imagen de arriba abajo.
     Es una campana: la opacidad sube y baja siguiendo una gaussiana, muestreada
     en 21 paradas. Con tres paradas (transparente → luz → transparente) el
     degradado es recto y se le ven los bordes, porque la pendiente cambia de
     golpe; así no hay ningún borde que ver.
     Para subir o bajar la intensidad, toca --revelado-fuerza. */
  --revelado-fuerza: 0.55;
  --revelado-difuminado: linear-gradient(
    180deg,
    rgb(var(--c-estrella) / calc(var(--revelado-fuerza) * 0.0132)) 0%,
    rgb(var(--c-estrella) / calc(var(--revelado-fuerza) * 0.0301)) 5%,
    rgb(var(--c-estrella) / calc(var(--revelado-fuerza) * 0.0628)) 10%,
    rgb(var(--c-estrella) / calc(var(--revelado-fuerza) * 0.1201)) 15%,
    rgb(var(--c-estrella) / calc(var(--revelado-fuerza) * 0.2107)) 20%,
    rgb(var(--c-estrella) / calc(var(--revelado-fuerza) * 0.3391)) 25%,
    rgb(var(--c-estrella) / calc(var(--revelado-fuerza) * 0.5006)) 30%,
    rgb(var(--c-estrella) / calc(var(--revelado-fuerza) * 0.6775)) 35%,
    rgb(var(--c-estrella) / calc(var(--revelado-fuerza) * 0.8411)) 40%,
    rgb(var(--c-estrella) / calc(var(--revelado-fuerza) * 0.9577)) 45%,
    rgb(var(--c-estrella) / calc(var(--revelado-fuerza) * 1.0000)) 50%,
    rgb(var(--c-estrella) / calc(var(--revelado-fuerza) * 0.9577)) 55%,
    rgb(var(--c-estrella) / calc(var(--revelado-fuerza) * 0.8411)) 60%,
    rgb(var(--c-estrella) / calc(var(--revelado-fuerza) * 0.6775)) 65%,
    rgb(var(--c-estrella) / calc(var(--revelado-fuerza) * 0.5006)) 70%,
    rgb(var(--c-estrella) / calc(var(--revelado-fuerza) * 0.3391)) 75%,
    rgb(var(--c-estrella) / calc(var(--revelado-fuerza) * 0.2107)) 80%,
    rgb(var(--c-estrella) / calc(var(--revelado-fuerza) * 0.1201)) 85%,
    rgb(var(--c-estrella) / calc(var(--revelado-fuerza) * 0.0628)) 90%,
    rgb(var(--c-estrella) / calc(var(--revelado-fuerza) * 0.0301)) 95%,
    rgb(var(--c-estrella) / calc(var(--revelado-fuerza) * 0.0132)) 100%
  );
  --revelado-suavizado: 18px;   /* desenfoque extra, remata los extremos */
  --aplicando-cielo-intensidad: 1.55;

  /* Horizonte del cielo */
  --cielo-horizonte: linear-gradient(
    180deg,
    rgb(var(--c-horizonte-alto) / 0) 0%,
    rgb(var(--c-horizonte-bajo) / 0.85) 100%
  );
}