/* ============================================================
   DESIGN TOKENS — Sistema Propiedad Horizontal
   ============================================================ */

:root {
  /* ── Brand Blues ── */
  --blue-50:  #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;
  --blue-900: #1e3a8a;

  /* ── Semantic ── */
  --success-400: #4ade80;
  --success-500: #22c55e;
  --success-600: #16a34a;
  --success-700: #15803d;

  --danger-400: #f87171;
  --danger-500: #ef4444;
  --danger-600: #dc2626;

  --warning-400: #fbbf24;
  --warning-500: #f59e0b;
  --warning-600: #d97706;

  /* ── Typography ── */
  --font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --font-size-xs:   0.75rem;
  --font-size-sm:   0.875rem;
  --font-size-base: 1rem;
  --font-size-lg:   1.125rem;
  --font-size-xl:   1.25rem;
  --font-size-2xl:  1.5rem;
  --font-size-3xl:  1.875rem;
  --font-size-4xl:  2.25rem;

  /* ── Spacing ── */
  --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;

  /* ── Border Radius ── */
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;

  /* ── Transitions ── */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Z-index ── */
  --z-sidebar:  100;
  --z-header:   200;
  --z-modal:    300;
  --z-toast:    400;
}

/* ══════════════════════════════════════════════════════════
   LIGHT MODE (default)
   ══════════════════════════════════════════════════════════ */
:root,
[data-theme="light"] {
  --color-primary:       #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-primary-light: #dbeafe;
  --color-primary-dim:   #eff6ff;

  --color-bg:        #f8fafc;
  --color-surface:   #ffffff;
  --color-surface-2: #f1f5fb;
  --color-surface-3: #e2eaf5;
  --color-border:    #d1dae9;
  --color-border-subtle: #e8eef8;

  --color-text:        #0d1b2a;
  --color-text-muted:  #4a5d7a;
  --color-text-subtle: #7c8fa3;
  --color-text-invert: #ffffff;

  --color-success:     #16a34a;
  --color-success-bg:  #f0fdf4;
  --color-success-border: #bbf7d0;

  --color-danger:      #dc2626;
  --color-danger-bg:   #fef2f2;
  --color-danger-border: #fecaca;

  --color-warning:     #d97706;
  --color-warning-bg:  #fffbeb;
  --color-warning-border: #fde68a;

  --shadow-sm:   0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:   0 10px 25px rgba(0,0,0,0.10), 0 4px 10px rgba(0,0,0,0.05);
  --shadow-xl:   0 20px 50px rgba(0,0,0,0.12), 0 8px 20px rgba(0,0,0,0.06);

  --sidebar-bg:       #1e3a8a;
  --sidebar-text:     rgba(255,255,255,0.75);
  --sidebar-active:   #ffffff;
  --sidebar-hover-bg: rgba(255,255,255,0.10);
  --sidebar-active-bg: rgba(255,255,255,0.15);

  --gradient-hero: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%);
  --gradient-card: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
}

/* ══════════════════════════════════════════════════════════
   DARK MODE
   ══════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --color-primary:       #60a5fa;
  --color-primary-hover: #93c5fd;
  --color-primary-light: #1e3a5f;
  --color-primary-dim:   #172035;

  --color-bg:        #0a0f1e;
  --color-surface:   #111827;
  --color-surface-2: #1f2937;
  --color-surface-3: #374151;
  --color-border:    #2d3d55;
  --color-border-subtle: #1e2d42;

  --color-text:        #e2e8f0;
  --color-text-muted:  #94a3b8;
  --color-text-subtle: #64748b;
  --color-text-invert: #0d1b2a;

  --color-success:     #4ade80;
  --color-success-bg:  #052e16;
  --color-success-border: #166534;

  --color-danger:      #f87171;
  --color-danger-bg:   #2d0a0a;
  --color-danger-border: #7f1d1d;

  --color-warning:     #fbbf24;
  --color-warning-bg:  #292000;
  --color-warning-border: #78350f;

  --shadow-sm:   0 1px 3px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.20);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.40), 0 2px 4px rgba(0,0,0,0.20);
  --shadow-lg:   0 10px 25px rgba(0,0,0,0.50), 0 4px 10px rgba(0,0,0,0.25);
  --shadow-xl:   0 20px 50px rgba(0,0,0,0.60), 0 8px 20px rgba(0,0,0,0.30);

  --sidebar-bg:       #060d1f;
  --sidebar-text:     rgba(255,255,255,0.60);
  --sidebar-active:   #60a5fa;
  --sidebar-hover-bg: rgba(255,255,255,0.06);
  --sidebar-active-bg: rgba(96,165,250,0.15);

  --gradient-hero: linear-gradient(135deg, #060d1f 0%, #0f2a60 50%, #1e4090 100%);
  --gradient-card: linear-gradient(145deg, #111827 0%, #1a2335 100%);
}