/* ==========================================================================
   01 · TOKENS
   Variables de diseño de MYMOON. Todo el color, la tipografía y las medidas
   del sitio salen de aquí. Hay dos temas: oscuro (por defecto) y claro.
   El tema se fija en <html data-theme="dark|light"> (ver layouts/app).

   Estilo: portal de juego. Fondo casi negro, acento lima neón, botones con
   degradado aguamarina → lima, esquinas biseladas y letra pixelada en los
   grandes titulares (los vehículos de MYMOON se construyen por bloques).
   ========================================================================== */

:root {
  /* Tipografía */
  --font-pixel: "Jersey 25", "Barlow", system-ui, sans-serif; /* titulares de portada */
  --font-display: "Barlow", system-ui, sans-serif;            /* títulos y botones */
  --font-body: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --fs-xs: .75rem;
  --fs-sm: .875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: clamp(1.7rem, 2.8vw, 2.25rem);
  --fs-3xl: clamp(2.1rem, 4.4vw, 3.2rem);
  --fs-hero: clamp(3rem, 10vw, 7.5rem);

  /* Espaciado (escala de 4 px) */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;

  /* Forma: el corte diagonal de las esquinas es el sello visual del sitio */
  --cut-sm: 6px;
  --cut: 12px;
  --cut-lg: 20px;
  --radius: 6px;
  --radius-lg: 18px;

  /* Medidas */
  --container: 1240px;
  --gutter: 16px;
  --header-h: 76px;

  /* Movimiento */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: .15s;
  --t: .25s;
}

@media (min-width: 768px) {
  :root { --gutter: 24px; }
}

/* --------------------------------------------------------------------------
   Tema oscuro (por defecto)
   -------------------------------------------------------------------------- */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #080b11;
  --bg-2: #0c1118;
  --surface: #131b24;
  --surface-2: #18222e;
  --surface-3: #1f2a37;
  --line: #222d3a;
  --line-strong: #314052;
  --field-bg: #0e141c;

  --text: #e8ebef;
  --text-2: #b7bcc4;
  --text-3: #7c8794;

  /* Acento lima: rellenos (botones, etiquetas) y texto destacado */
  --accent: #ddf247;
  --accent-2: #e9fb7a;
  --accent-ink: #0b0f14;              /* texto sobre lima */
  --accent-text: #ddf247;             /* texto en color de acento */
  --accent-text-hover: #effd9c;
  --accent-soft: rgba(221, 242, 71, .12);
  --accent-glow: rgba(221, 242, 71, .40);
  --accent-gradient: linear-gradient(90deg, #7ef0e0 0%, #c4f07a 55%, #ddf247 100%);

  --ion: #6ef3d6;                     /* aguamarina: información y detalles */
  --ion-soft: rgba(110, 243, 214, .12);
  --ion-glow: rgba(110, 243, 214, .35);

  --ok: #6ee7a0;
  --ok-soft: rgba(110, 231, 160, .12);
  --danger: #ff6b5e;
  --danger-soft: rgba(255, 107, 94, .12);

  --grid-line: rgba(140, 170, 210, .045);
  --star: rgba(255, 255, 255, .75);
  --header-bg: rgba(8, 11, 17, .82);
  --nav-tab: #0c1118;
  --btn-primary-border: rgba(255, 255, 255, .85);
  --shadow: 0 20px 50px -20px rgba(0, 0, 0, .75);
  --stage-bg:
    radial-gradient(55% 55% at 50% 60%, rgba(221, 242, 71, .10), transparent 70%),
    radial-gradient(40% 40% at 82% 18%, rgba(110, 243, 214, .10), transparent 70%),
    linear-gradient(180deg, #131b24 0%, #0a0e14 100%);
}

/* --------------------------------------------------------------------------
   Tema claro
   El lima no se lee como texto sobre blanco: para texto se usa un oliva
   oscuro (--accent-text) y el lima queda para rellenos con texto oscuro.
   -------------------------------------------------------------------------- */
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #eef1f5;
  --bg-2: #e5e9ef;
  --surface: #ffffff;
  --surface-2: #f5f7fa;
  --surface-3: #e9edf2;
  --line: #d7dde5;
  --line-strong: #b8c2cf;
  --field-bg: #f7f9fb;

  --text: #0d131b;
  --text-2: #3f4a58;
  --text-3: #6b7685;

  --accent: #d4ef2e;
  --accent-2: #c6e21f;
  --accent-ink: #0b0f14;
  --accent-text: #5b7000;
  --accent-text-hover: #435300;
  --accent-soft: rgba(150, 180, 0, .12);
  --accent-glow: rgba(170, 200, 0, .35);
  --accent-gradient: linear-gradient(90deg, #8ff0e2 0%, #c8ef6e 55%, #d4ef2e 100%);

  --ion: #0b8f78;
  --ion-soft: rgba(11, 143, 120, .10);
  --ion-glow: rgba(11, 143, 120, .25);

  --ok: #13874d;
  --ok-soft: rgba(19, 135, 77, .10);
  --danger: #c93a2e;
  --danger-soft: rgba(201, 58, 46, .09);

  --grid-line: rgba(20, 40, 70, .05);
  --star: rgba(13, 19, 27, .28);
  --header-bg: rgba(238, 241, 245, .86);
  --nav-tab: #ffffff;
  --btn-primary-border: #0b0f14;
  --shadow: 0 18px 40px -22px rgba(20, 40, 80, .30);
  --stage-bg:
    radial-gradient(55% 55% at 50% 60%, rgba(180, 210, 0, .14), transparent 70%),
    radial-gradient(40% 40% at 82% 18%, rgba(11, 143, 120, .10), transparent 70%),
    linear-gradient(180deg, #ffffff 0%, #e9edf2 100%);
}