/**
 * GoalChain Design System — Canonical Tokens (docs/ mirror)
 * ------------------------------------------------------------
 * Espejo del sistema de tokens de goalchain_webapp/src/styles/tokens.css.
 * Única fuente de verdad visual compartida entre el sitio de marketing
 * (docs/) y la webapp transaccional (goalchain_webapp/).
 *
 * Define los --gc-* canónicos (neones Solana primarios, cristal, glows,
 * tipografía) y mapea las variables legacy de docs (--primary, --secondary,
 * --bg-dark, --card-bg...) a esos tokens vía alias, para que style.css
 * (2696 líneas) consuma la nueva paleta sin necesidad de reescribirlo.
 *
 * Convención de nombres: --gc-* (GoalChain).
 */

:root {
  /* ==========================================
     1. FONDO ATMOSFÉRICO
     ========================================== */
  --gc-bg: #030307;
  --gc-bg-elev: #0a0a14;
  --gc-bg-deep: #000000;

  --gc-grid-line: rgba(255, 255, 255, 0.015);
  --gc-radial-purple: rgba(153, 69, 255, 0.12);
  --gc-radial-green: rgba(20, 241, 149, 0.12);

  /* ==========================================
     2. NEONES SOLANA (PRIMARIOS)
     ========================================== */
  --gc-green: #14f195; /* éxito, goles, depósitos, acción primaria */
  --gc-purple: #9945ff; /* branding secundario, staking, DeFi */
  --gc-red: #ff4b4b; /* alertas, retiros, cancelaciones */

  /* Variantes alpha */
  --gc-green-a08: rgba(20, 241, 149, 0.08);
  --gc-green-a12: rgba(20, 241, 149, 0.12);
  --gc-green-a15: rgba(20, 241, 149, 0.15);
  --gc-green-a20: rgba(20, 241, 149, 0.20);
  --gc-green-a45: rgba(20, 241, 149, 0.45);

  --gc-purple-a08: rgba(153, 69, 255, 0.08);
  --gc-purple-a12: rgba(153, 69, 255, 0.12);
  --gc-purple-a15: rgba(153, 69, 255, 0.15);
  --gc-purple-a20: rgba(153, 69, 255, 0.20);
  --gc-purple-a45: rgba(153, 69, 255, 0.45);

  --gc-red-a08: rgba(255, 75, 75, 0.08);
  --gc-red-a12: rgba(255, 75, 75, 0.12);
  --gc-red-a25: rgba(255, 75, 75, 0.25);

  /* ==========================================
     3. TEXTO
     ========================================== */
  --gc-text: #f0f0f5;
  --gc-text-dim: #8a8a9a;
  --gc-text-faint: #6b7a99;
  --gc-text-inverse: #030307;

  /* ==========================================
     4. BORDES
     ========================================== */
  --gc-border: rgba(255, 255, 255, 0.08);
  --gc-border-strong: rgba(255, 255, 255, 0.12);
  --gc-border-hover: rgba(20, 241, 149, 0.25);
  --gc-border-purple: rgba(153, 69, 255, 0.35);

  /* ==========================================
     5. SUPERFICIES DE CRISTAL (3 niveles)
     ========================================== */
  --gc-glass-bg: rgba(255, 255, 255, 0.03);
  --gc-glass-blur: blur(8px) saturate(160%);

  --gc-glass-strong-bg: rgba(255, 255, 255, 0.06);
  --gc-glass-strong-blur: blur(16px) saturate(180%);

  --gc-glass-frost-bg: rgba(255, 255, 255, 0.06);
  --gc-glass-frost-blur: blur(24px) saturate(200%);

  --gc-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* ==========================================
     6. SOMBRAS Y GLOWS NEÓN
     ========================================== */
  --gc-shadow-card: 0 8px 32px rgba(0, 0, 0, 0.5);
  --gc-shadow-elev: 0 16px 45px rgba(0, 0, 0, 0.55);

  --gc-glow-green: 0 0 20px var(--gc-green-a20), 0 0 40px rgba(20, 241, 149, 0.10);
  --gc-glow-green-soft: 0 0 15px var(--gc-green-a20);
  --gc-glow-purple: 0 0 20px var(--gc-purple-a12), 0 0 40px rgba(153, 69, 255, 0.10);
  --gc-glow-purple-soft: 0 0 15px var(--gc-purple-a45);
  --gc-glow-red: 0 0 18px var(--gc-red-a25);

  --gc-focus-ring: 0 0 0 2px var(--gc-purple);

  /* ==========================================
     7. TIPOGRAFÍA
     ========================================== */
  --gc-font: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif;
  --gc-font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  --gc-fs-xs: 0.8rem;
  --gc-fs-sm: 0.9rem;
  --gc-fs-base: 1rem;
  --gc-fs-lg: 1.25rem;
  --gc-fs-xl: 1.75rem;
  --gc-fs-2xl: 2.5rem;
  --gc-fs-3xl: 3.5rem;

  --gc-fw-regular: 400;
  --gc-fw-semibold: 600;
  --gc-fw-bold: 700;
  --gc-fw-black: 800;

  /* ==========================================
     8. ESPACIADO Y RADIOS
     ========================================== */
  --gc-space-1: 0.25rem;
  --gc-space-2: 0.5rem;
  --gc-space-3: 0.75rem;
  --gc-space-4: 1rem;
  --gc-space-5: 1.5rem;
  --gc-space-6: 2rem;
  --gc-space-7: 3rem;

  --gc-radius-sm: 8px;
  --gc-radius-md: 12px;
  --gc-radius-lg: 16px;
  --gc-radius-xl: 20px;
  --gc-radius-pill: 999px;

  /* ==========================================
     9. ANIMACIONES
     ========================================== */
  --gc-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gc-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --gc-dur-fast: 150ms;
  --gc-dur-base: 200ms;
  --gc-dur-slow: 400ms;

  /* ==========================================
     ALIAS — Variables legacy de docs → tokens canónicos
     Mantiene style.css (2696 líneas) funcional sin reescribirlo.
     ========================================== */
  --bg-dark: var(--gc-bg);
  --bg-surface: var(--gc-bg-elev);
  --card-bg: var(--gc-glass-bg);
  --primary: var(--gc-green);
  --primary-dim: var(--gc-green-a15);
  --primary-neon: var(--gc-green);
  --secondary: var(--gc-purple);
  --secondary-dim: var(--gc-purple-a15);
  --secondary-neon: var(--gc-purple);
  --accent: var(--gc-green);
  --accent-red: var(--gc-red);
  --gold: #ffd700;
  --text-main: var(--gc-text);
  --text-dim: var(--gc-text-dim);
  --glass: var(--gc-glass-bg);
  --glass-strong: var(--gc-glass-strong-bg);
  --border: var(--gc-border);
  --border-glow: var(--gc-border-hover);
  --danger: var(--gc-red);
}

/* ==========================================
   ACCESIBILIDAD — Movimiento reducido
   ========================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --gc-dur-fast: 0ms;
    --gc-dur-base: 0ms;
    --gc-dur-slow: 0ms;
    --gc-ease: linear;
    --gc-ease-out: linear;
  }
}