/* ═══════════════════════════════════════════════════════════════════════════
   StikMatch — Sistema visual "Gaming vibrante"
   Fuentes self-hosteadas (sin CDN). Tokens: se conservan los nombres previos
   (remapeados) + se agregan nuevos (--font-display, --accent, --brand-bright).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Fuentes de marca ── */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-400.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-600.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/inter-800.woff2) format('woff2')}
@font-face{font-family:'Bricolage';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/bricolage-700.woff2) format('woff2')}
@font-face{font-family:'Bricolage';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/bricolage-800.woff2) format('woff2')}

:root {
  /* ── Marca — violeta StikMatch ── */
  --brand-primary:      #7C5CE6;
  --brand-primary-dark: #4A35C0;
  --brand-bright:       #9E82FF;   /* violeta claro (highlights) */
  --brand-green:        #7C5CE6;   /* alias histórico: color UI de marca = violeta */
  --brand-blue:         #5B9CF6;
  --brand-amber:        #F5B13C;
  --brand-red:          #F26D6A;

  /* ── Acento neón menta — reservado a momentos clave (tengo/completo/match) ── */
  --accent:     #0FB57E;   /* en claro, versión con contraste */
  --accent-dim: #0A8F63;

  /* ── Estados de figurita ── */
  --color-owned:    #0FB57E;   /* menta = la tengo */
  --color-repeated: #F5B13C;   /* ámbar = repetida */
  --color-missing:  transparent;

  /* ── Fondo — modo claro (neutrales con leve sesgo violeta, elegidos) ── */
  --bg-base:    #F5F4FB;
  --bg-subtle:  #F1EFFA;
  --bg-card:    #FFFFFF;
  --bg-overlay: rgba(124, 92, 230, .05);

  /* ── Texto ── */
  --text-primary:   #181826;
  --text-secondary: #54556E;
  --text-tertiary:  #8A8AA4;

  /* ── Bordes ── */
  --border-light:  #E6E3F3;
  --border-medium: #D3CEE8;

  /* ── Sombras (teñidas de marca) ── */
  --shadow-sm: 0 1px 3px rgba(60,40,150,.08);
  --shadow-md: 0 6px 18px -6px rgba(60,40,150,.14);
  --shadow-lg: 0 18px 40px -16px rgba(60,40,150,.20);
  --glow-brand:  0 10px 26px -12px rgba(124,92,230,.5);
  --glow-accent: 0 8px 22px -10px rgba(15,181,126,.4);

  /* ── Radios ── */
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 9999px;

  /* ── Tipografía ── */
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;   /* body */
  --font-display: 'Bricolage', 'Inter', system-ui, sans-serif;                  /* títulos/números */
  --font-size-base: 16px;

  /* ── Transiciones (easing premium) ── */
  --ease:    cubic-bezier(.2,.7,.2,1);
  --t-fast:  150ms cubic-bezier(.2,.7,.2,1);
  --t-base:  250ms cubic-bezier(.2,.7,.2,1);
  --t-slow:  400ms cubic-bezier(.2,.7,.2,1);
}

[data-theme="dark"] {
  --brand-bright: #9E82FF;
  --accent:     #23E6A0;   /* menta neón — brilla sobre fondo oscuro */
  --accent-dim: #0FB57E;
  --color-owned: #23E6A0;

  --bg-base:    #0A0A11;   /* casi negro con sesgo violeta */
  --bg-subtle:  #14141F;
  --bg-card:    #16161F;
  --bg-overlay: rgba(124, 92, 230, .07);

  --text-primary:   #F4F3FA;
  --text-secondary: #9FA0BA;
  --text-tertiary:  #6A6B84;

  --border-light:   rgba(150,140,255,.12);
  --border-medium:  rgba(150,140,255,.22);

  --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
  --shadow-md: 0 6px 20px -8px rgba(0,0,0,.55);
  --shadow-lg: 0 18px 40px -16px rgba(0,0,0,.6);
  --glow-brand:  0 10px 30px -10px rgba(124,92,230,.5);
  --glow-accent: 0 0 0 1px rgba(35,230,160,.32), 0 8px 24px -8px rgba(35,230,160,.35);
}

/* ═══ Base tipográfica y de accesibilidad (global, cargado en todas las páginas) ═══ */
body { font-family: var(--font-sans); letter-spacing: -.005em }
h1, h2, h3, h4, .brand-name, .hero-title, .disp {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
}
.num, .tabular { font-variant-numeric: tabular-nums }

:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: 6px;
}

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