/* ==========================================================================
   SUPERLIGA FRONTIER TCG — TOKENS DE DISEÑO
   --------------------------------------------------------------------------
   Fuente única de verdad del sistema visual. Ningún componente define un
   color, un tamaño o una duración a mano: todo sale de aquí.

   Referencia: Brand Identity Briefing, secciones 18–19 y 23–27.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TIPOGRAFÍA — Geist autoalojada (variable, 100–900 en un solo fichero)
   Fallback a Inter y, si tampoco carga, a la pila del sistema.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/geist-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/geist-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ======================================================================
     COLOR — base
     ====================================================================== */
  --void: #0B0C10;         /* fondo principal de toda la interfaz */
  --void-2: #101218;       /* fondo hundido: inputs, celdas, pozos */
  --panel: #16181D;        /* tarjetas, paneles, superficies elevadas */
  --panel-2: #1D2027;      /* superficie sobre superficie: modal, popover */
  --line: rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .16);

  --frost: #EDEEF1;        /* texto principal */
  --frost-dim: #93959F;    /* texto secundario, metadatos */
  --frost-faint: rgba(255, 255, 255, .40); /* solo decorativo, nunca texto */

  /* ---- acento único de firma: ámbar de trofeo, no naranja neón ---- */
  --amber: #E8752A;
  --amber-light: #FFB168;
  --amber-ink: #2B1204;    /* texto sobre fondo ámbar (contraste AA) */
  --amber-soft: rgba(232, 117, 42, .12);
  --amber-line: rgba(232, 117, 42, .35);

  /* ---- semánticos: los colores del propio reglamento de fútbol ---- */
  --success: #3DDC9B;
  --success-text: #8FF3D2;   /* variante legible sobre fondo oscuro (AA) */
  --success-bg: rgba(61, 220, 155, .12);
  --success-line: rgba(61, 220, 155, .38);

  --warning: #F2B134;       /* tarjeta amarilla */
  --warning-text: #FFD98A;
  --warning-bg: rgba(242, 177, 52, .12);
  --warning-line: rgba(242, 177, 52, .38);

  --danger: #F0554A;        /* tarjeta roja */
  --danger-text: #FFA79E;
  --danger-bg: rgba(240, 85, 74, .12);
  --danger-line: rgba(240, 85, 74, .35);

  --info: #5B96F2;
  --info-text: #AFC9FA;
  --info-bg: rgba(91, 150, 242, .12);
  --info-line: rgba(91, 150, 242, .32);

  /* ======================================================================
     COLOR — rarezas
     Cada nivel define color de etiqueta, halo de la placa de arte y borde
     del marco. La marca NO cromática (chevrones, corona, patrón) la pone
     el componente de carta, no estos tokens.
     ====================================================================== */
  --rz1: #9CA0AC;  --rz1-halo: rgba(156, 160, 172, .16);  --rz1-ink: #C9CCD4;
  --rz2: #3DDC9B;  --rz2-halo: rgba(61, 220, 155, .16);   --rz2-ink: #8FF3D2;
  --rz3: #5B96F2;  --rz3-halo: rgba(91, 150, 242, .18);   --rz3-ink: #AFC9FA;
  --rz4: #A47BFF;  --rz4-halo: rgba(164, 123, 255, .20);  --rz4-ink: #CDB8FF;
  --rz5: #FFB168;  --rz5-halo: rgba(255, 138, 62, .22);   --rz5-ink: #FFD3A8;
  --rz6: #FFFFFF;  --rz6-halo: rgba(255, 255, 255, .18);  --rz6-ink: #FFFFFF;

  /* degradados de las dos rarezas cumbre */
  --rz5-grad: linear-gradient(100deg, #F2B134, #E8752A 55%, #FF8A3E);
  --rz6-grad: linear-gradient(100deg, #E8752A, #F2B134, #3DDC9B, #5B96F2, #A47BFF, #E8752A);

  /* ======================================================================
     TIPOGRAFÍA
     ====================================================================== */
  --font-ui: 'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', 'SFMono-Regular', 'Consolas', ui-monospace, monospace;

  /* escala fluida: el valor mínimo es el de móvil, el máximo el de escritorio */
  --fs-display: clamp(3.5rem, 2rem + 7vw, 6rem);      /* 56 → 96px */
  --fs-h1: clamp(2.5rem, 1.9rem + 2.4vw, 3rem);       /* 40 → 48px */
  --fs-h2: clamp(1.75rem, 1.5rem + 1vw, 2rem);        /* 28 → 32px */
  --fs-h3: clamp(1.25rem, 1.18rem + .3vw, 1.375rem);  /* 20 → 22px */
  --fs-body: 1rem;                                     /* 16px */
  --fs-body-sm: .9375rem;                              /* 15px */
  --fs-caption: .8125rem;                              /* 13px */
  --fs-caption-sm: .75rem;                             /* 12px */

  --lh-tight: 1.05;   /* display y H1 */
  --lh-heading: 1.2;  /* H2, H3 */
  --lh-body: 1.55;    /* texto de lectura */

  --tracking-display: -.02em;
  --tracking-caption: .08em;  /* caption va en mayúsculas con este tracking */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ======================================================================
     ESPACIADO — escala de 8 pasos en base 4px
     1–4 dentro de componentes densos · 5–8 entre bloques y secciones
     ====================================================================== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ======================================================================
     RADIO — mayor en contenedores grandes, menor en controles
     ====================================================================== */
  --radius-sm: 8px;   /* botones, inputs, chips */
  --radius-md: 12px;  /* paneles pequeños, alertas */
  --radius-lg: 16px;  /* paneles, tarjetas de sobre */
  --radius-xl: 22px;  /* tarjeta de carta y modales */
  --radius-pill: 999px;

  /* ======================================================================
     SOMBRA — luz cenital (desplazamiento en Y, nunca centrada)
     El nivel lg se reserva a elementos que flotan sobre el flujo:
     modal, hover de carta, celebración de sobre.
     ====================================================================== */
  --shadow-sm: 0 2px 6px -2px rgba(0, 0, 0, .5);
  --shadow-md: 0 12px 28px -14px rgba(0, 0, 0, .65);
  --shadow-lg: 0 28px 60px -22px rgba(0, 0, 0, .78);

  /* ======================================================================
     MOTION — una sola curva para toda la interfaz
     ====================================================================== */
  --ease: cubic-bezier(.2, .8, .2, 1);      /* entrada firme, salida suave */
  --ease-out: cubic-bezier(.16, 1, .3, 1);  /* solo para salidas de ceremonia */

  --t-micro: 160ms;      /* hover, focus, pulsación */
  --t-media: 380ms;      /* cambios de estado, apertura de modal */
  --t-ceremonia: 700ms;  /* SOLO apertura de sobre y duelo */

  /* ======================================================================
     LAYOUT — mobile-first
     Puntos de corte (no pueden ser variables dentro de @media, se documentan
     aquí y se repiten literalmente en las media queries del sistema):
       480px   · fin de 1 columna
       1024px  · fin de tablet (grid de 8)
       1440px  · fin de escritorio (grid de 12, contenido 1280px)
       1920px  · fin de panorámico (contenido 1440px)
       >1920px · ultra panorámico (contenido 1680px)
     ====================================================================== */
  --wrap: 100%;      /* ancho máximo del contenido, se sube por breakpoint */
  --gutter: 16px;    /* margen lateral de página */
  --cols: 1;         /* columnas del grid de página */
  --gap: var(--space-4);

  /* ======================================================================
     CAPAS
     ====================================================================== */
  --z-nav: 50;
  --z-backdrop: 90;
  --z-modal: 100;
  --z-toast: 120;

  /* altura de la nav fija: usada por scroll-padding para que el foco de
     teclado nunca quede tapado (WCAG 2.2 SC 2.4.11) */
  --nav-h: 64px;
}

@media (min-width: 480px) {
  :root {
    --gutter: 24px;
    --cols: 8;
    --gap: var(--space-5);
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 32px;
    --cols: 12;
    --wrap: 1280px;
    --nav-h: 72px;
  }
}

@media (min-width: 1440px) {
  :root { --wrap: 1440px; }
}

@media (min-width: 1920px) {
  :root { --wrap: 1680px; }
}