/* ==========================================================================
   tokens.css — Variables de diseño (colores, tipografía, espaciado)
   Cambia aquí la identidad visual de toda la web.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* Superficies */
  --bg: #06080c;
  --bg-2: #0a0e14;
  --surface: rgba(17, 23, 32, 0.65);
  --surface-solid: #111720;
  --border: rgba(148, 163, 184, 0.14);

  /* Texto */
  --text: #e8eef6;
  --text-soft: #b4c0cf;
  --muted: #7d8a9c;

  /* Acentos (cian eléctrico → azul → violeta) */
  --accent: #22d3ee;
  --accent-rgb: 34, 211, 238;
  --accent-2: #4f8cff;
  --accent-3: #a78bfa;
  --grad: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 60%, var(--accent-3) 100%);

  /* Código (terminal del hero) */
  --code-kw: #c792ea;
  --code-fn: #82aaff;
  --code-str: #c3e88d;
  --code-num: #f78c6c;
  --code-cm: #5c6b7f;

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

  /* Layout */
  --container: 1120px;
  --header-h: 68px;
  --radius: 18px;
  --radius-sm: 12px;

  /* Movimiento */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-glow: 0 0 60px rgba(var(--accent-rgb), 0.18);
}

/* Tema claro (opcional, con el botón de la cabecera) */
[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f8fc;
  --bg-2: #eaf0f7;
  --surface: rgba(255, 255, 255, 0.75);
  --surface-solid: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --text: #0b1220;
  --text-soft: #334155;
  --muted: #64748b;
  --accent: #0891b2;
  --accent-rgb: 8, 145, 178;
  --accent-2: #2563eb;
  --accent-3: #7c3aed;
  --code-cm: #94a3b8;
  --code-kw: #7c3aed;
  --code-fn: #2563eb;
  --code-str: #15803d;
  --code-num: #c2410c;
  --shadow-glow: 0 0 60px rgba(var(--accent-rgb), 0.12);
}