/* Visual design tokens for Lite AI Index */
:root {
  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 32px;
  --text-4xl: 44px;

  --leading-tight: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;
  --tracking-tight: -0.01em;
  --tracking-wide: 0.02em;

  /* Spacing scale (8px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Shadows (tuned for dark surfaces) */
  --shadow-1: 0 2px 8px rgba(0, 0, 0, .22);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, .28);
  --shadow-3: 0 20px 40px rgba(0, 0, 0, .32);
  /* Aliases for compatibility with existing CSS */
  --shadow-sm: var(--shadow-1);
  --shadow-md: var(--shadow-2);
  --shadow-lg: var(--shadow-3);

  /* Motion */
  --ease-smooth: cubic-bezier(.2,.8,.2,1);
  --duration-1: 120ms;
  --duration-2: 200ms;
  --duration-3: 320ms;

  /* Z-index */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-tooltip: 1030;
  --z-modal: 1040;
  --z-popover: 1050;

  /* Container */
  --container-sm: 640px;
  --container-md: 960px;
  --container-lg: 1200px;
  --container-xl: 1280px;

  /* Brand (indigo + violet, acorde a tu UI) */
  --brand-400: #7B93FF;
  --brand-500: #6C8CFF; /* principal */
  --brand-600: #5274F5;
  --brand-700: #3E5FE6;

  --accent-400: #9F7AFC;
  --accent-500: #8B5CF6; /* violeta */
  --accent-600: #7C3AED;

  /* Semánticos */
  --success-500: #3AD0A1;
  --warn-500:    #F5B452;
  --error-500:   #F26D6D;

  /* Dark theme neutrales/superficies */
  --surface-0: #0c1420;
  --surface-1: #0c1420;
  --surface-2: #1a202c;
  --surface-3: #2d3748;

  --text-1: #E9EEF5;
  --text-2: #B9C4D0;
  --border-color: rgba(255,255,255,.08);

  /* Light theme neutrales/superficies */
  --surface-0-light: #f8fafc;
  --surface-1-light: #f1f5f9;
  --surface-2-light: #e2e8f0;
  --surface-3-light: #cbd5e1;

  --text-1-light: #0F172A;
  --text-2-light: #334155;
  --border-color-light: rgba(0,0,0,.10);

  /* Gradientes */
  --gradient-brand: linear-gradient(135deg, var(--brand-500) 0%, var(--accent-500) 100%);
  --gradient-accent: linear-gradient(45deg, #f093fb 0%, #f5576c 100%);

  /* Focus */
  --focus-ring: 2px solid var(--brand-500);
  --focus-offset: 2px;

  /* Backdrop */
  --blur-1: blur(6px);
  --blur-2: blur(10px);

  /* Mapeo para compatibilidad con tu CSS actual */
  --primary-gradient: var(--gradient-brand);
  --secondary-gradient: var(--gradient-accent);
  --text-gradient: linear-gradient(45deg, var(--brand-500), var(--accent-500));

  --dark-bg: var(--surface-1);
  --dark-text: var(--text-1);
  --dark-card-bg: rgba(255, 255, 255, 0.04);
  --dark-card-border: var(--border-color);
  --dark-card-hover-bg: rgba(255, 255, 255, 0.08);
  --dark-card-hover-border: rgba(255, 255, 255, 0.15);

  --light-bg: var(--surface-0-light);
  --light-text: var(--text-1-light);
  --light-card-bg: rgba(255,255,255,0.80);
  --light-card-border: var(--border-color-light);
  --light-card-hover-bg: rgba(255,255,255,0.95);
  --light-card-hover-border: rgba(0,0,0,0.15);

  --transition-fast: var(--duration-1) var(--ease-smooth);
  --transition-normal: var(--duration-2) var(--ease-smooth);
  --transition-slow: var(--duration-3) var(--ease-smooth);
}

/* Atajos por tema usando tu clase existente */
body {
  font-family: var(--font-sans);
  color: var(--text-1);
  background: var(--dark-bg);
}

body.light-theme {
  color: var(--text-1-light);
  background: var(--light-bg);
}