/* ============================================
   queleelagente - Design Tokens
   Sistema de diseño inspirado en Fable.co
   ============================================ */

:root {
  /* === COLORES CORE === */
  --qlg-ink: #1a1a2e;           /* Texto principal */
  --qlg-paper: #faf8f5;         /* Fondo público */
  --qlg-parchment: #f0ebe3;     /* Fondo admin */

  /* === ACENTOS VIBRANTES === */
  --qlg-coral: #e07a5f;         /* CTA principal */
  --qlg-coral-hover: #c9684f;
  --qlg-sage: #7fb069;          /* Aprobar/éxito */
  --qlg-sage-hover: #6a9557;
  --qlg-gold: #d4a373;          /* Destacados */
  --qlg-lavender: #9381ff;      /* Focus/links */
  --qlg-rose: #d1748a;          /* Rechazar/error */
  --qlg-rose-hover: #b8606f;
  --qlg-warning: #e9c46a;       /* Advertencias */

  /* === NEUTRALES === */
  --qlg-charcoal: #2d2d2d;      /* Texto secundario */
  --qlg-stone: #6b6b6b;         /* Texto terciario */
  --qlg-mist: #e8e4df;          /* Bordes suaves */
  --qlg-cloud: #f5f3f0;         /* Fondos elevados */
  --qlg-white: #ffffff;

  /* === TIPOGRAFÍA === */
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;

  /* === TAMAÑOS TIPOGRÁFICOS === */
  --text-xs: 0.75rem;           /* 12px */
  --text-sm: 0.875rem;          /* 14px */
  --text-base: 1rem;            /* 16px */
  --text-lg: 1.125rem;          /* 18px */
  --text-xl: 1.25rem;           /* 20px */
  --text-2xl: 1.5rem;           /* 24px */
  --text-3xl: 2rem;             /* 32px */
  --text-4xl: 2.5rem;           /* 40px */

  /* === LINE HEIGHTS === */
  --leading-tight: 1.2;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 1.8;

  /* === ESPACIADO (escala 4px) === */
  --space-0: 0;
  --space-1: 0.25rem;           /* 4px */
  --space-2: 0.5rem;            /* 8px */
  --space-3: 0.75rem;           /* 12px */
  --space-4: 1rem;              /* 16px */
  --space-5: 1.5rem;            /* 24px */
  --space-6: 2rem;              /* 32px */
  --space-7: 3rem;              /* 48px */
  --space-8: 4rem;              /* 64px */

  /* === BORDER RADIUS === */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* === SOMBRAS === */
  --shadow-sm: 0 1px 2px rgba(26, 26, 46, 0.05);
  --shadow-md: 0 4px 12px rgba(26, 26, 46, 0.08);
  --shadow-lg: 0 8px 30px rgba(26, 26, 46, 0.12);
  --shadow-xl: 0 20px 50px rgba(26, 26, 46, 0.15);

  /* === TRANSICIONES === */
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
}

/* === RESET BASE === */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--qlg-ink);
}

/* === UTILIDADES === */
.font-serif { font-family: var(--font-serif); }
.font-sans { font-family: var(--font-sans); }

.text-ink { color: var(--qlg-ink); }
.text-charcoal { color: var(--qlg-charcoal); }
.text-stone { color: var(--qlg-stone); }

.bg-paper { background-color: var(--qlg-paper); }
.bg-parchment { background-color: var(--qlg-parchment); }
.bg-white { background-color: var(--qlg-white); }