/* ==========================================================
   KaosMC · tokens.css
   ÚNICO sitio donde se definen colores. Ajusta la marca aquí.
   Contraste AA verificado:
   - Claro: blanco sobre #7C3AED = 5.7:1 · #5B21B6 sobre #F6F4FB = 8.2:1
   - Oscuro: blanco sobre #8548F2 = 5.0:1 (el #8B5CF6 propuesto daba 4.2:1,
     se oscurece un punto y el hover pasa a #7C3AED en vez de aclararse)
   - Discord #5865F2 con blanco = 4.6:1 · #2A1B00 sobre #FFC93C = 11:1
   ========================================================== */

:root {
  /* Tipografía */
  --font-title: "Chakra Petch", "Sora", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-pixel: "Silkscreen", ui-monospace, "Courier New", monospace;

  --fs-h1: clamp(2.25rem, 5vw, 3.5rem);
  --fs-h2: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem);
  --fs-h3: 1.125rem;
  --fs-body: 1.0625rem;

  /* Espaciado (4px) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px;
  --sp-8: 32px; --sp-12: 48px; --sp-16: 64px; --sp-24: 96px;

  /* Forma */
  --r-btn: 12px;
  --r-card: 14px;
  --r-cta: 20px;
  --r-tile: 10px;
  --r-badge: 6px;
  --container: 1200px;
  --gutter: 16px;
  --header-h: 64px;

  --dur-fast: 150ms;
  --dur: 200ms;
}
@media (min-width: 1024px) {
  :root { --gutter: 32px; --header-h: 72px; }
}

/* ---------- Tema único estilo Kaos (como el launcher): fondo casi negro, morado neón y magenta ----------
   Contraste AA verificado: #F5F2FF sobre #17112B = 16:1 · #B3A7D3 sobre #17112B = 8:1 · #E3A6FF sobre #17112B = 9:1
   (los valores de abajo de la versión anterior se conservan como referencia) ----------
   Contraste AA verificado: #F5F2FF sobre #1B1530 = 15:1 · #B7AECF sobre #251D40 = 7:1
   blanco sobre #8548F2 = 5.0:1 · #C4A8FF sobre #251D40 = 8:1 */
:root {
  color-scheme: dark;
  --bg: #0E0A1C;
  --surface: #17112B;
  --surface-2: #211839;
  --hero-bg: radial-gradient(120% 80% at 50% 0%, #2B1658 0%, #0E0A1C 70%);
  --text: #F5F2FF;
  --text-muted: #B3A7D3;
  --border: #34265C;
  --accent: #8548F2;
  --accent-hover: #7C3AED;
  --accent-ink: #E3A6FF;
  --accent-soft: #2C1D52;
  --on-accent: #FFFFFF;
  --gold: #FFC93C;
  --on-gold: #2A1B00;
  --discord: #5865F2;
  --cta-from: #5B21B6;
  --cta-to: #7C3AED;
  --cta-grid: rgb(255 255 255 / 0.1);
  --focus: #E879F9;

  /* Cuadrícula de bloques */
  --grid-line: rgb(167 139 250 / 0.14);
  --cell-1: rgb(167 139 250 / 0.14);
  --cell-2: rgb(167 139 250 / 0.22);

  --glow-card: 0.22;
  --shadow-hover: 0 8px 24px rgb(0 0 0 / 0.3);
  --mark-bg: #4A2C86;
  --mark-text: #F2EAFF;

  /* Severidad (por si una norma define escala) */
  --sev-warn: #E0A800;  --sev-warn-bg: #3A3010;  --sev-warn-ink: #FFD966;
  --sev-mute: #F28A2E;  --sev-mute-bg: #40260E;  --sev-mute-ink: #FFB074;
  --sev-ban:  #EF4444;  --sev-ban-bg:  #451A22;  --sev-ban-ink:  #FF9C9C;
  --sev-perm: #B91C1C;  --sev-perm-bg: #260A0F;  --sev-perm-ink: #FFB3B3;

  --status-on: #4ADE80;  --status-off: #7C7596;

  /* Banner de la portada: velo ligero, nunca recolorea la imagen */
  --banner-scrim-top: rgba(0, 0, 0, 0);  --banner-scrim-bottom: rgba(20, 10, 40, 0.15);
  --banner-scrim-left: rgba(20, 10, 40, 0.42);
  --banner-fallback: #3A2A70;  --banner-fallback-end: #1B1530;
  --on-banner: #FFFFFF;

  /* Logo y fragmentos de la portada */
  --logo-glow: rgba(167, 139, 250, 0.45);
  --shard-1: #C4A1FF;  --shard-2: #A855F7;  --shard-3: #FFC93C;

  /* Panel de conexión y botones de la portada */
  --panel-bg: #2A2148;  --panel-border: rgba(196, 168, 255, 0.55);
  --discord-ink: #A5ADFF;  --gold-ink: #FFC93C;
  --shadow-bar: 0 10px 28px rgba(0, 0, 0, 0.35);
}

/* Encuadre del banner (object-position). Ajusta aquí para mover la imagen:
   --banner-pos        portada en escritorio
   --banner-pos-mobile portada en móvil (<640px)
   --banner-pos-compact franja de las subpáginas
   --hero-offset-y     desplaza hacia arriba/abajo el grupo logo + panel + botones */
:root {
  --banner-pos: 50% 40%;
  --banner-pos-mobile: 50% 40%;
  --banner-pos-compact: 50% 22%;
  --hero-offset-y: -1vh;
}