/* ===== Integrados Design Tokens ===== */
:root {
  /* Brand */
  --brand-navy: #0B0F19;
  --brand-blue: #1366FF;
  --brand-cyan: #00E5FF;
  --brand-purple: #8A2BFF;
  --brand-magenta: #FF4DFF;

  /* Surfaces */
  --surface-light: #F2F4F7;
  --surface-white: #FFFFFF;
  --surface-dark: #111827;
  --surface-dark-secondary: #172033;

  /* Text */
  --text-primary: #0F172A;
  --text-secondary: #64748B;
  --text-on-dark: #FFFFFF;
  --text-on-dark-secondary: #94A3B8;

  /* Border */
  --border: #CBD5E1;
  --border-strong: #94A3B8;
  --border-dark: rgba(255, 255, 255, 0.08);

  /* Functional */
  --success: #10B981;
  --success-soft: #D1FAE5;
  --success-text: #065F46;
  --warning: #F59E0B;
  --warning-soft: #FEF3C7;
  --warning-text: #92400E;
  --danger: #EF4444;
  --danger-soft: #FEE2E2;
  --danger-text: #991B1B;
  --info: #1366FF;
  --info-soft: #DBEAFE;
  --info-text: #1E40AF;

  /* Gradients */
  --gradient-brand: linear-gradient(135deg, #1366FF 0%, #00E5FF 45%, #8A2BFF 100%);
  --gradient-cta: linear-gradient(90deg, #1366FF, #8A2BFF);
  --gradient-alt: linear-gradient(135deg, #00E5FF, #1366FF, #8A2BFF);
  --gradient-primary: var(--gradient-brand);
  --gradient-accent: var(--gradient-cta);

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-modal: 16px;

  /* Spacing (4px grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;

  /* Shadows */
  --shadow-sm: 0 4px 16px rgba(11, 15, 25, 0.06);
  --shadow-md: 0 8px 30px rgba(11, 15, 25, 0.10);
  --shadow-lg: 0 12px 40px rgba(11, 15, 25, 0.15);

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 200ms;
  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Typography */
  --font-display: 'Poppins', system-ui, sans-serif;
  --font-heading: 'Poppins', 'Montserrat', Arial, sans-serif;
  --font-body: 'Montserrat', 'Poppins', system-ui, sans-serif;

  /* Layout */
  --header-height: 72px;
  --header-height-mobile: 64px;
  --sidebar-width: 252px;
  --container: 1120px;
  --touch: 44px;

  /* Semantic aliases (legacy-compatible) */
  --accent: var(--brand-blue);
  --accent-light: #3D82FF;
  --accent-soft: #E8F0FF;
  --bg-primary: var(--surface-white);
  --bg-secondary: var(--surface-light);
  --bg-card: var(--surface-white);
  --text-muted: var(--text-secondary);
  --white: #FFFFFF;
  --muted: var(--text-secondary);
  --card: var(--surface-white);
  --bg: var(--surface-light);
  --warn-soft: var(--warning-soft);
  --warn-text: var(--warning-text);
}

[data-theme="dark"] {
  --bg-primary: var(--brand-navy);
  --bg-secondary: var(--surface-dark);
  --bg-card: var(--surface-dark);
  --text-primary: #FFFFFF;
  --text-secondary: #94A3B8;
  --border: var(--border-dark);
  --border-strong: rgba(255, 255, 255, 0.16);
}

@media (max-width: 768px) {
  :root { --header-height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration: 1ms; --transition: 1ms linear; }
}