/**
 * UCI Design System - Main Entry Point
 * Civic Tech-Noir aesthetic with gold/cyan accents
 *
 * Import order matters:
 * 1. Variables (design tokens)
 * 2. Base (reset, typography)
 * 3. Utilities (animations, helpers)
 * 4. Components
 * 5. Layouts
 */

/* ==========================================
   Google Fonts
   ========================================== */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* ==========================================
   Design Tokens
   ========================================== */
@import 'variables.css';

/* ==========================================
   Base Styles
   ========================================== */
@import 'base.css';

/* ==========================================
   Utilities
   ========================================== */
@import 'utilities.css';

/* ==========================================
   Components
   ========================================== */
@import 'components/buttons.css';
@import 'components/forms.css';
@import 'components/cards.css';
@import 'components/modal.css';
@import 'components/toast.css';
@import 'components/nav.css';

/* ==========================================
   Layouts
   ========================================== */
@import 'layouts/sidebar.css';
@import 'layouts/auth.css';
@import 'layouts/home.css';

/* ==========================================
   Pages
   ========================================== */
@import 'pages/connections.css';

/* ==========================================
   Tailwind Compatibility Layer
   These classes bridge existing Tailwind usage
   ========================================== */

/* Text colors */
.text-white { color: var(--uci-text); }
.text-gray-300 { color: var(--uci-text-secondary); }
.text-gray-400 { color: var(--uci-text-muted); }
.text-gray-500 { color: var(--uci-text-muted); }
.text-gray-600 { color: var(--uci-text-dim); }
.text-gray-700 { color: var(--uci-text); }
.text-red-500, .text-red-600 { color: var(--uci-error); }
.text-green-500, .text-green-600 { color: var(--uci-success); }
.text-yellow-500 { color: var(--uci-gold); }
.text-blue-500, .text-blue-600 { color: var(--uci-info); }

/* Background colors */
.bg-gray-50 { background-color: var(--uci-bg); }
.bg-gray-100 { background-color: var(--uci-surface); }
.bg-gray-800 { background-color: var(--uci-surface); }
.bg-gray-900 { background-color: var(--uci-bg); }
.bg-white { background-color: var(--uci-surface); }

/* Border colors */
.border-gray-200 { border-color: var(--uci-border); }
.border-gray-300 { border-color: var(--uci-border); }
.border-gray-600 { border-color: var(--uci-border-hover); }
.border-gray-700 { border-color: var(--uci-border); }
.border-red-500 { border-color: var(--uci-error); }

/* Font sizes */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }

/* Font weights */
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

/* Spacing helpers */
.space-y-1 > * + * { margin-top: var(--space-1); }
.space-y-2 > * + * { margin-top: var(--space-2); }
.space-y-3 > * + * { margin-top: var(--space-3); }
.space-y-4 > * + * { margin-top: var(--space-4); }
.space-y-6 > * + * { margin-top: var(--space-6); }
.space-y-8 > * + * { margin-top: var(--space-8); }

.space-x-1 > * + * { margin-left: var(--space-1); }
.space-x-2 > * + * { margin-left: var(--space-2); }
.space-x-3 > * + * { margin-left: var(--space-3); }
.space-x-4 > * + * { margin-left: var(--space-4); }

/* Grid */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sm\:inline { display: inline; }
}

@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Dark mode overrides for Tailwind classes */
.dark .dark\:text-white { color: var(--uci-text); }
.dark .dark\:text-gray-300 { color: var(--uci-text-secondary); }
.dark .dark\:text-gray-400 { color: var(--uci-text-muted); }
.dark .dark\:bg-gray-800 { background-color: var(--uci-surface); }
.dark .dark\:bg-gray-900 { background-color: var(--uci-bg); }
.dark .dark\:border-gray-600 { border-color: var(--uci-border); }
.dark .dark\:border-gray-700 { border-color: var(--uci-border); }
.dark .dark\:border-red-500 { border-color: var(--uci-error); }

/* ==========================================
   Legacy Style Compatibility
   Keeping existing class names working
   ========================================== */

/* Scope badge */
.scope-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-weight: 500;
  border-radius: var(--radius-full);
  background: var(--uci-gold-subtle);
  color: var(--uci-gold);
}

/* Scope item hover */
.scope-item:hover {
  background-color: var(--uci-surface-hover);
}

/* Client logo */
.client-logo {
  max-width: 80px;
  max-height: 80px;
  object-fit: contain;
}