/* =========================================================
   IKARYS GAMING — DESIGN TOKENS
   Fuente: Documento 12 (Diseño Visual y UX) + identidad de marca.
   No se deben declarar colores, tipografías ni espaciados sueltos
   fuera de este archivo: todo componente consume estas variables.
   ========================================================= */

:root {
  /* ---- Color: negro y blanco dominan, rojo como acento ---- */
  --ik-black-deep:   #000000;
  --ik-black:         #0b0b0c;   /* fondo principal */
  --ik-black-raised:  #131315;   /* tarjetas, header, superficies elevadas */
  --ik-black-line:    #232326;   /* bordes sutiles sobre negro */

  --ik-white:          #f5f5f4;  /* texto principal sobre negro */
  --ik-white-pure:     #ffffff;  /* máximo contraste, uso puntual */
  --ik-grey:           #8b8b8f;  /* texto secundario */
  --ik-grey-dim:       #55555a;  /* texto terciario / deshabilitado */

  --ik-red:            #a81f2e;  /* rojo IKARYS — acento oficial */
  --ik-red-bright:     #d42a3c;  /* hover / estados activos */
  --ik-red-dim:        #5c1017;  /* fondos rojos muy sutiles */

  /* ---- Tipografía ---- */
  --font-display: "Oswald", "Arial Narrow", sans-serif;   /* títulos, marca, nav */
  --font-body:    "Inter", -apple-system, "Segoe UI", sans-serif; /* cuerpo, datos */

  --fs-hero:    clamp(2.75rem, 7vw, 5.5rem);
  --fs-h1:      clamp(2rem, 4vw, 3rem);
  --fs-h2:      clamp(1.5rem, 3vw, 2.1rem);
  --fs-h3:      1.25rem;
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-micro:   0.75rem;

  --lh-tight:  1.1;
  --lh-normal: 1.5;

  /* ---- Espaciado (escala base 8px) ---- */
  --sp-1: 0.5rem;
  --sp-2: 0.75rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;
  --sp-6: 3rem;
  --sp-7: 4.5rem;
  --sp-8: 7rem;

  --content-max: 1200px;
  --content-narrow: 760px;

  /* ---- Bordes y radios: esquinas suaves en UI, geometría angular reservada para insignias ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-pill: 999px;
  --border-hairline: 1px solid var(--ik-black-line);

  /* ---- Transiciones ---- */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur-base: 280ms;
  --dur-slow: 600ms;

  /* ---- Sombra / profundidad (mínima, no "SaaS card kit") ---- */
  --shadow-raised: 0 12px 32px -16px rgba(0, 0, 0, 0.6);

  /* ---- Layout compartido ---- */
  --header-h: 76px;   /* alto del encabezado: el drawer móvil y su fondo arrancan justo debajo */

  /* ---- Superficies claras (contraste selectivo) ----
     Se usan solo dentro de .surface-light, que reasigna los tokens oscuros
     a esta paleta para que todo el contenido interno cambie de forma coherente. */
  --ik-paper:        #ebe9e4;   /* gris cálido ahumado */
  --ik-paper-raised: #f7f6f3;   /* tarjetas / paneles sobre la superficie clara */
  --ik-paper-line:   rgba(11, 11, 12, 0.13);
  --ik-ink:          #0b0b0c;   /* texto principal sobre claro (≈17:1) */
  --ik-ink-soft:     #3b3b40;   /* texto secundario sobre claro (≈9:1) */
  --ik-ink-dim:      #5c5c62;   /* texto terciario sobre claro (≈5.6:1) */

  /* ---- Sistema de cristal (variante oscura / clara / sólida) ---- */
  --glass-dark-bg:     linear-gradient(155deg, rgba(255,255,255,0.09), rgba(255,255,255,0.025)), rgba(19, 19, 21, 0.72);
  --glass-dark-border: rgba(255, 255, 255, 0.12);
  --glass-dark-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --glass-dark-sheen:  rgba(255, 255, 255, 0.13);
  --glass-dark-solid:  #17171a;

  --glass-light-bg:     linear-gradient(155deg, rgba(255,255,255,0.88), rgba(255,255,255,0.58));
  --glass-light-border: rgba(11, 11, 12, 0.11);
  --glass-light-shadow: 0 18px 38px -24px rgba(11, 11, 12, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --glass-light-sheen:  rgba(255, 255, 255, 0.75);
  --glass-light-solid:  #f7f6f3;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}