/* 
  Sokaktan.net Design System
  Phase 1 Implementation 
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

:root {
  /* Color Palette */
  --primary-deep-purple: #3D1054;
  --secondary-lavender: #9B59B6;
  --accent-warm-purple: #C084FC;
  --bg-color: #FAFAFA;
  --surface-color: #FFFFFF;
  --dark-surface: #1A0A2E;
  --text-primary: #1A0A2E;
  --text-secondary: #6B7280;
  --border-color: #E5E7EB;
  
  /* Status Colors */
  --success-color: #10B981;
  --warning-color: #F59E0B;
  --error-color: #EF4444;
  
  /* Portal Accents */
  --market-accent: #06B6D4;
  --restaurant-accent: #F97316;
  
  /* Gradients */
  --grad-primary: linear-gradient(135deg, #3D1054 0%, #9B59B6 100%);
  --grad-market: linear-gradient(135deg, #0F766E 0%, #06B6D4 100%);
  --grad-restaurant: linear-gradient(135deg, #9A3412 0%, #F97316 100%);
  --grad-premium: linear-gradient(135deg, #D4AF37 0%, #F3E5AB 100%);
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(61, 16, 84, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(61, 16, 84, 0.1), 0 2px 4px -1px rgba(61, 16, 84, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(61, 16, 84, 0.1), 0 4px 6px -2px rgba(61, 16, 84, 0.05);
  --shadow-primary: 0 4px 20px rgba(61, 16, 84, 0.12);
  
  /* Typography Variables */
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Inter', sans-serif;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  
  /* Grid/Layout */
  --container-max: 1280px;
  --container-ultra: 1440px;
}

/* Global Reset & Base */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  background-color: var(--bg-color);
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  margin-top: 0;
}

/* Typography Utilities */
.font-display { font-family: var(--font-display); }
.font-body { font-family: var(--font-body); }
.text-tabular { font-variant-numeric: tabular-nums; }
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }

/* Components: Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  text-decoration: none;
}

.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--grad-primary);
  color: white;
  box-shadow: var(--shadow-primary);
}
.btn-primary:hover { opacity: 0.95; box-shadow: 0 6px 24px rgba(61, 16, 84, 0.2); }

.btn-restaurant {
  background: var(--grad-restaurant);
  color: white;
  border-radius: var(--radius-full);
}
.btn-market {
  background: var(--grad-market);
  color: white;
  border-radius: var(--radius-full);
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}
.btn-outline:hover {
  background: var(--bg-color);
  border-color: var(--primary-deep-purple);
}

.btn-ghost {
  background: transparent;
  color: var(--primary-deep-purple);
}
.btn-ghost:hover { background: rgba(61, 16, 84, 0.05); }

/* Components: Cards */
.card {
  background: var(--surface-color);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
  overflow: hidden;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.card-premium {
  border: 1px solid #D4AF37;
  box-shadow: inset 0 0 10px rgba(212, 175, 55, 0.1);
}

/* Components: Badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
}
.badge-success { background: rgba(16, 185, 129, 0.1); color: var(--success-color); }
.badge-warning { background: rgba(245, 158, 11, 0.1); color: var(--warning-color); }
.badge-error { background: rgba(239, 68, 68, 0.1); color: var(--error-color); }
.badge-premium { background: var(--grad-premium); color: var(--dark-surface); }
.badge-ai { background: rgba(192, 132, 252, 0.1); color: var(--accent-warm-purple); border: 1px solid var(--accent-warm-purple); }

/* Animations */
@keyframes pulse-ring {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(61, 16, 84, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(61, 16, 84, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(61, 16, 84, 0); }
}

@keyframes shimmer {
  0% { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}
.skeleton {
  background: #f6f7f8;
  background-image: linear-gradient(90deg, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
  background-repeat: no-repeat;
  background-size: 1000px 100%;
  animation: shimmer 2s infinite linear forwards;
}

@keyframes slide-up-fade {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Helpers */
.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-2 { gap: 8px; }
.gap-4 { gap: 16px; }
.mt-4 { margin-top: 16px; }
.mb-4 { margin-bottom: 16px; }
.w-100 { width: 100%; }