/* ===========================================================================
   TOKENS
   Único archivo que una marca necesita tocar. Todo lo demás consume variables.
   El tema claro redefine estos mismos nombres en claro.css: ningún componente
   vuelve a escribir un color literal.
   =========================================================================== */

:root{
	/* --- Marca. Base genérica; Candy será la primera distribución. --- */
	--marca-1: #4f7cff;   /* primario   */
	--marca-2: #7b5cfa;   /* secundario */
	--marca-3: #00c2a8;   /* acento     */

	--marca-1-rgb: 79,124,255;
	--marca-2-rgb: 123,92,250;
	--marca-3-rgb: 0,194,168;

	/* --- Profundidad del lienzo. Cuatro planos, no uno. --- */
	--fondo:   #080c17;
	--fondo-2: #0b1020;
	--fondo-3: #0f152a;
	--fondo-4: #141c34;

	/* --- Superficies de vidrio sobre el lienzo. --- */
	--superficie:   rgba(255,255,255,.045);
	--superficie-2: rgba(255,255,255,.065);
	--superficie-3: rgba(255,255,255,.095);
	--superficie-honda: rgba(0,0,0,.22);

	/* --- Bordes. El borde superior claro es lo que levanta las tarjetas. --- */
	--linea:        rgba(255,255,255,.085);
	--linea-fuerte: rgba(255,255,255,.16);
	--luz-superior: linear-gradient(90deg, rgba(255,255,255,.30), rgba(255,255,255,.04) 48%, transparent);

	/* --- Texto. --- */
	--texto:       rgba(255,255,255,.95);
	--texto-suave: rgba(255,255,255,.70);
	--texto-tenue: rgba(255,255,255,.45);
	--texto-sobre-marca: #ffffff;

	/* --- Semántica. --- */
	--exito:   #19b47f;
	--aviso:   #f0a92b;
	--peligro: #ef5a4c;
	--info:    #3b9dfa;

	--exito-rgb:   25,180,127;
	--aviso-rgb:   240,169,43;
	--peligro-rgb: 239,90,76;
	--info-rgb:    59,157,250;

	/* --- Tonos de estado. Las tres dimensiones del §11.3 comparten escala. --- */
	--tono-neutro:  rgba(255,255,255,.42);
	--tono-espera:  var(--aviso);
	--tono-proceso: var(--info);
	--tono-listo:   var(--exito);
	--tono-alerta:  var(--peligro);
	--tono-baja:    rgba(255,255,255,.26);

	/* --- Elevación. Tres niveles, siempre los mismos. --- */
	--sombra-1: 0 2px 4px rgba(0,0,0,.18), 0 10px 28px rgba(0,0,0,.26);
	--sombra-2: 0 4px 8px rgba(0,0,0,.22), 0 18px 48px rgba(0,0,0,.34);
	--sombra-3: 0 8px 16px rgba(0,0,0,.26), 0 32px 80px rgba(0,0,0,.46);
	--sombra-marca: 0 10px 30px rgba(var(--marca-1-rgb), .34);
	--sombra-interior: inset 0 1px 0 rgba(255,255,255,.07);

	/* --- Halos del lienzo. Lo que impide que el fondo se vea plano. --- */
	--halo-lienzo:
		radial-gradient(1100px 580px at 8% -8%,  rgba(var(--marca-1-rgb), .20), transparent 58%),
		radial-gradient(900px 540px at 92% 2%,   rgba(var(--marca-2-rgb), .18), transparent 54%),
		radial-gradient(820px 520px at 62% 104%, rgba(var(--marca-3-rgb), .10), transparent 56%);

	/* --- Geometría. --- */
	--radio-xs: 8px;
	--radio-sm: 12px;
	--radio-md: 16px;
	--radio-lg: 22px;
	--radio-xl: 28px;
	--radio-pil: 999px;

	/* --- Tipografía. --- */
	--fuente: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--fuente-num: "Inter", ui-monospace, SFMono-Regular, monospace;

	/* --- Estructura. --- */
	--lateral-ancho: 252px;
	--lateral-plegado: 84px;
	--superior-alto: 76px;
	--respiro: 24px;

	--transicion: .22s cubic-bezier(.4,0,.2,1);
	--transicion-lenta: .38s cubic-bezier(.4,0,.2,1);
}