/*
  DESIGN TOKENS
  Paleta "AI-focused": azul eléctrico + violeta + magenta sobre navy profundo.
  Escala tipográfica de 9 pasos (ratio 1.2 / minor third) con emparejamiento:
    - Space Grotesk  -> display/headings (geométrica, carácter técnico)
    - Inter          -> body/UI (neutral, alta legibilidad en párrafos largos)
    - JetBrains Mono -> labels/tags/datos (refuerza identidad "ingeniería")
  Movimiento: duraciones cortas para feedback, largas para ambientación;
  curvas ease-out para entradas, ease-in-out para toggles, spring para CTAs.
*/

:root {
  /* ---- Color: dark theme (default) ---- */
  --bg: #090c14;
  --bg-elevated: #10141f;
  --bg-elevated-2: #161c2c;
  --bg-overlay: rgba(9, 12, 20, 0.72);

  --text-primary: #eef1fb;
  --text-secondary: #9aa4c4;
  --text-muted: #808aab;

  --primary: #4f7cff;
  --primary-2: #22d3ee;
  --accent: #a855f7;
  --accent-2: #ec4899;

  --border: #232a3d;
  --border-strong: #313b57;

  --success: #34d399;
  --warning: #fbbf24;

  --gradient-brand: linear-gradient(135deg, var(--primary) 0%, var(--accent) 55%, var(--accent-2) 100%);
  /* Para elementos con texto blanco encima (botón primario, logo, idioma activo): contraste >= 4.6:1 */
  --gradient-action: linear-gradient(135deg, #3b5fe0 0%, #9333ea 55%, #db2777 100%);
  --gradient-radial: radial-gradient(circle at 50% 0%, rgba(79, 124, 255, 0.18), transparent 60%);
  --glow-primary: 0 0 40px rgba(79, 124, 255, 0.35);
  --glow-accent: 0 0 40px rgba(168, 85, 247, 0.3);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.45);

  /* ---- Typography ---- */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  /* 9-step fluid modular scale, ratio ~1.2 */
  --step--2: clamp(0.68rem, 0.66rem + 0.1vw, 0.72rem);
  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.875rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.05rem);
  --step-1:  clamp(1.2rem, 1.13rem + 0.35vw, 1.3rem);
  --step-2:  clamp(1.44rem, 1.33rem + 0.55vw, 1.6rem);
  --step-3:  clamp(1.73rem, 1.56rem + 0.85vw, 2rem);
  --step-4:  clamp(2.07rem, 1.83rem + 1.2vw, 2.5rem);
  --step-5:  clamp(2.49rem, 2.13rem + 1.8vw, 3.2rem);
  --step-6:  clamp(2.99rem, 2.4rem + 3vw, 4.4rem);

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;

  /* ---- Spacing (4px base) ---- */
  --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: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-full: 999px;

  /* ---- Motion ---- */
  --dur-instant: 100ms;
  --dur-fast: 180ms;
  --dur-base: 280ms;
  --dur-slow: 450ms;
  --dur-slower: 700ms;
  --dur-ambient: 1200ms;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --container: 1180px;
  --header-h: 76px;
  --section-pad: var(--space-9); /* padding vertical de cada <section> */
}

:root[data-theme='light'] {
  --bg: #f6f7fc;
  --bg-elevated: #ffffff;
  --bg-elevated-2: #eef0fa;
  --bg-overlay: rgba(246, 247, 252, 0.78);

  --text-primary: #10142a;
  --text-secondary: #454e6e;
  --text-muted: #5f6885;

  --primary: #3457e6;
  --primary-2: #0e7490;
  --accent: #8b2fd6;
  --accent-2: #cf1c72;

  --border: #e2e5f2;
  --border-strong: #c9cee4;

  --gradient-action: var(--gradient-brand); /* ya cumple >= 5.1:1 con texto blanco */
  --gradient-radial: radial-gradient(circle at 50% 0%, rgba(52, 87, 230, 0.10), transparent 60%);
  --glow-primary: 0 0 40px rgba(52, 87, 230, 0.18);
  --glow-accent: 0 0 40px rgba(139, 47, 214, 0.15);

  --shadow-sm: 0 1px 2px rgba(16, 20, 42, 0.06);
  --shadow-md: 0 8px 24px rgba(16, 20, 42, 0.08);
  --shadow-lg: 0 24px 60px rgba(16, 20, 42, 0.12);
}

/* Complementa al bloque de animations.css: aqui se anulan las duraciones/retardos que usan tokens;
   alli, las animaciones con duracion literal. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-slower: 0ms;
    --dur-ambient: 0ms;
  }
}