/* ============================================================================
   VARIABLES CSS - BASE Y TOKENS DE DISEÑO
   ============================================================================ */

:root {
  /* ========== Color Palette - Grises ========== */
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-950: #020617;

  --gray-50: #f9f9f9;
  --gray-100: #f0f0f0;
  --gray-200: #e0e0e0;
  --gray-300: #d0d0d0;
  --gray-400: #a0a0a0;
  --gray-500: #808080;
  --gray-600: #606060;
  --gray-700: #404040;
  --gray-800: #202020;
  --gray-900: #101010;

  --neutral-50: #fafafa;
  --neutral-100: #f0f0f0;
  --neutral-500: #666666;
  --neutral-600: #4a4a4a;

  --monochrome-50: #ffffff;
  --monochrome-100: #f8f8f8;
  --monochrome-500: #808080;
  --monochrome-600: #666666;

  --contrast-50: #ffffff;
  --contrast-100: #f5f5f5;
  --contrast-500: #333333;
  --contrast-600: #000000;

  /* ========== Tipografía ========== */
  --font-sans: "Sofia Pro", "Sofia Pro Fallback", system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-headings: "Sofia Pro", system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco,
    Consolas, "Liberation Mono", "Courier New", monospace;

  /* ========== Espaciado ========== */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* ========== Border Radius ========== */
  --radius-sm: 0.125rem;
  --radius: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;

  /* ========== Transiciones ========== */
  --transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-colors: color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ========== Tipografía - Tamaños ========== */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
}