/* ==========================================================
   WoW Agencia Creativa · Colores, tipografía y medidas
   Este archivo define el "ADN visual" de todo el sistema.
   Si quieres cambiar un color en toda la web, se cambia aquí.
   ========================================================== */

:root {
  /* ---------- Azules marinos (fondos oscuros) ---------- */
  --navy-950: #070a12;   /* el más oscuro: pie de página, capas profundas */
  --navy-900: #0a0e17;   /* fondo principal de WoW */
  --navy-800: #0f1626;   /* fondo alterno, bandas */
  --navy-700: #131c30;   /* tarjetas y paneles sobre oscuro */
  --navy-600: #22304f;   /* líneas y bordes sobre oscuro */

  /* ---------- Azul eléctrico (el acento de WoW) ---------- */
  --blue-500: #2f7dfa;   /* color de marca: botones y detalles */
  --blue-600: #1f5fd0;   /* texto azul sobre fondo claro; botón al presionar */
  --blue-300: #7fb0ff;   /* texto azul sobre fondo oscuro */
  --blue-action: #2868e0;       /* fondo de botones: deja el texto blanco bien legible */
  --blue-action-hover: #1f5fd0; /* el mismo botón al pasar el cursor */
  --blue-glow: rgba(47, 125, 250, 0.35); /* resplandor, úsalo con moderación */

  /* ---------- Claros (secciones en blanco azulado) ---------- */
  --paper-0: #ffffff;
  --paper-50: #f4f7fc;   /* fondo de las secciones claras */
  --paper-200: #d7e0f0;  /* líneas y bordes sobre claro */

  /* ---------- Textos ---------- */
  --white: #ffffff;
  --ink-900: #0a0e17;    /* texto principal sobre claro */
  --ink-600: #4a5878;    /* texto secundario sobre claro */
  --mist-300: #9db0d3;   /* texto secundario sobre oscuro */

  /* ---------- Mensajes de la Academia (aciertos, errores, avisos) ---------- */
  --ok: #2fbf71;
  --ok-soft: rgba(47, 191, 113, 0.14);
  --warn: #f5a524;
  --warn-soft: rgba(245, 165, 36, 0.14);
  --bad: #ef5b5b;
  --bad-soft: rgba(239, 91, 91, 0.14);

  /* ---------- Tipografías ---------- */
  --font-main: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Tamaños de letra (se adaptan al ancho de pantalla) ---------- */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --text-3xl: clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
  --text-4xl: clamp(2.4rem, 1.5rem + 4vw, 4.5rem);
  --text-hero: clamp(5rem, 2rem + 24vw, 15rem); /* las letras WOW gigantes */

  /* ---------- Espacios ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;

  --page-width: 1120px;   /* ancho máximo del contenido */
  --gutter: 16px;         /* margen mínimo a los lados en celular */

  /* ---------- Bordes redondeados y sombras ---------- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 999px;

  --shadow-card: 0 10px 30px rgba(7, 10, 18, 0.35);
  --shadow-lift: 0 18px 44px rgba(7, 10, 18, 0.5);
  --shadow-blue: 0 12px 30px rgba(47, 125, 250, 0.4);

  /* ---------- Movimiento ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --time-fast: 0.2s;
  --time-base: 0.4s;
  --time-slow: 0.9s;

  color-scheme: dark;
}

/* ==========================================================
   Skins: cada sección elige "oscura" o "clara" y todos los
   componentes (tarjetas, textos, botones) se adaptan solos.
   Uso:  <section class="skin-dark">  o  <section class="skin-light">
   ========================================================== */

.skin-dark {
  --bg: var(--navy-900);
  --bg-alt: var(--navy-800);
  --surface: var(--navy-700);
  --line: var(--navy-600);
  --fg: var(--white);
  --fg-muted: var(--mist-300);
  --accent: var(--blue-500);
  --accent-text: var(--blue-300);
}

.skin-light {
  --bg: var(--paper-50);
  --bg-alt: var(--paper-0);
  --surface: var(--paper-0);
  --line: var(--paper-200);
  --fg: var(--ink-900);
  --fg-muted: var(--ink-600);
  --accent: var(--blue-500);
  --accent-text: var(--blue-600);
}

.skin-dark,
.skin-light {
  background: var(--bg);
  color: var(--fg);
}

/* Valores por defecto de toda la página (fondo oscuro) */
body {
  --bg: var(--navy-900);
  --bg-alt: var(--navy-800);
  --surface: var(--navy-700);
  --line: var(--navy-600);
  --fg: var(--white);
  --fg-muted: var(--mist-300);
  --accent: var(--blue-500);
  --accent-text: var(--blue-300);

  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-main);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}