/* ============================================================
   bigpickle — DESIGN TOKENS (única fuente de verdad)
   Cargar en cada página ANTES del <style> propio:
     <link rel="stylesheet" href="tokens.css">
   No volver a declarar :root con colores en las páginas.
   ============================================================ */

:root {
  /* ── COLOR · base ────────────────────────────────────────── */
  --black: #080808;
  --green: #7BAE6E;
  --neon:  #A8D5A2;
  --white: #F0F0E8;   /* crema, no blanco puro */
  --gray:  #1A1A1A;
  --muted: #3a3a3a;
  --dim:   #9a9a9a;

  /* ── COLOR · canales RGB (para alphas sin hardcodear) ─────── */
  /* uso: background: rgb(var(--black-rgb) / .85); */
  --black-rgb: 8 8 8;
  --neon-rgb:  168 213 162;

  /* ── COLOR · roles semánticos ────────────────────────────── */
  --danger:        #ffb3b3;  /* texto/borde de error en forms   */
  --danger-strong: #cc4444;  /* fondo botón "no se envió"        */
  --field-focus-bg:#0f0f0f;  /* fondo de input en focus          */
  --gray-hover:    #222;     /* hover de cards sobre --gray      */

  /* ── TIPOGRAFÍA · escala (colapsa ~28 tamaños sueltos) ────── */
  --fs-2xs:    .65rem;
  --fs-xs:     .75rem;
  --fs-sm:     .85rem;
  --fs-md:     1rem;
  --fs-lg:     1.15rem;
  --fs-xl:     1.3rem;
  --fs-2xl:    1.6rem;
  --fs-display:2rem;

  /* ── ESPACIADO · escala ──────────────────────────────────── */
  --sp-1: .6rem;
  --sp-2: .9rem;
  --sp-3: 1.2rem;
  --sp-4: 1.8rem;
  --sp-5: 2.5rem;
  --sp-6: 4rem;

  /* ── MOTION ──────────────────────────────────────────────── */
  --dur-fast: .2s;
  --dur:      .3s;
  --dur-slow: .6s;

  /* ── FORMA ───────────────────────────────────────────────── */
  --radius: 0;  /* el sistema es de esquinas rectas — explícito */
}