/* =============================================================================
   Sayclon Gaming · Tokens
   -----------------------------------------------------------------------------
   El UNICO archivo del sitio con valores hexadecimales. Todo lo demas se
   escribe con estas variables. Si hace falta un color nuevo, se agrega aca.
   ========================================================================== */

:root {
  /* --- Base ---------------------------------------------------------------- */
  --fondo:            #05070A;
  --superficie:       #0F1318;
  --elevada:          #161C26;
  --borde:            #27374F;

  /* --- Marca --------------------------------------------------------------- */
  --cyan:             #2BA3D0;  /* acento, cifras grandes, boton principal      */
  --azul:             #1C98F4;  /* el azul del logo                             */
  --celeste:          #7FB8E1;  /* texto chico de marca y enlaces               */

  /* --- Texto --------------------------------------------------------------- */
  --texto:            #E8EEF5;
  --texto-2:          #9AAABE;
  --texto-3:          #5E7085;

  /* --- Funcionales --------------------------------------------------------- */
  --oro:              #E8B84B;  /* podio                                        */
  --verde:            #2FBF8F;
  --rojo:             #E5484D;

  /* --- Derivados ----------------------------------------------------------- */
  --borde-suave:      color-mix(in srgb, var(--borde) 55%, transparent);
  --borde-fuerte:     color-mix(in srgb, var(--borde) 100%, var(--texto-3) 20%);
  --cyan-tenue:       color-mix(in srgb, var(--cyan) 14%, transparent);
  --cyan-hover:       color-mix(in srgb, var(--cyan) 85%, var(--texto) 15%);
  --oro-tenue:        color-mix(in srgb, var(--oro) 12%, transparent);
  --rojo-tenue:       color-mix(in srgb, var(--rojo) 12%, transparent);
  --fila-hover:       color-mix(in srgb, var(--texto) 4%, transparent);
  --fondo-modal:      color-mix(in srgb, var(--fondo) 78%, transparent);
  --foco:             color-mix(in srgb, var(--cyan) 55%, transparent);

  /* --- Tipografia ---------------------------------------------------------- */
  --fuente-titulo:    "Archivo", "Helvetica Neue", Arial, sans-serif;
  --fuente-interfaz:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                      Roboto, Arial, sans-serif;

  --t-xs:             0.75rem;
  --t-sm:             0.8125rem;
  --t-base:           0.9375rem;
  --t-md:             1.0625rem;
  --t-lg:             1.375rem;
  --t-xl:             1.875rem;
  --t-2xl:            2.5rem;
  --t-3xl:            3.25rem;

  /* --- Espaciado ----------------------------------------------------------- */
  --e1:               4px;
  --e2:               8px;
  --e3:               12px;
  --e4:               16px;
  --e5:               24px;
  --e6:               32px;
  --e7:               48px;
  --e8:               72px;

  /* --- Formas -------------------------------------------------------------- */
  --r-chico:          6px;
  --r:                10px;
  --r-grande:         14px;

  --sombra:           0 1px 2px color-mix(in srgb, var(--fondo) 70%, transparent),
                      0 8px 24px color-mix(in srgb, var(--fondo) 55%, transparent);

  /* --- Medidas ------------------------------------------------------------- */
  --ancho:            1160px;
  --ancho-angosto:    720px;
  --barra:            64px;
}