/* Deep Dynamic Design Variables */
:root {
  --bg-primary: #030712;
  --bg-card: rgba(17, 24, 39, 0.85);
  --header-bg: rgba(3, 7, 18, 0.85);
  --border-color: rgba(255, 255, 255, 0.08);
  --input-bg: #1f2937;
  --text-brand: #f9fafb;
  --text-sub: #9ca3af;
}

html.light {
  --bg-primary: #f8fafc;
  --bg-card: #ffffff;
  --header-bg: rgba(255, 255, 255, 0.9);
  --border-color: #e2e8f0;
  --input-bg: #f1f5f9;
  --text-brand: #0f172a;
  --text-sub: #64748b;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-brand);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.header-glass {
  background-color: var(--header-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: var(--border-color);
}

.card-bg {
  background-color: var(--bg-card);
  backdrop-filter: blur(12px);
}

.card-border {
  border-color: var(--border-color);
}

.text-brand {
  color: var(--text-brand);
}

.text-sub {
  color: var(--text-sub);
}

.input-field {
  background-color: var(--input-bg);
  border: 1px solid var(--border-color);
  color: var(--text-brand);
  transition: all 0.2s ease;
}

.input-field:focus {
  outline: none;
  border-color: #f43f5e;
  box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.15);
}

.hero-banner {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.2) 0%, rgba(3, 7, 18, 0.95) 100%), 
              url('https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=1600&q=80') center/cover no-repeat;
}

.theme-toggle-btn {
  background-color: var(--input-bg);
  border-color: var(--border-color);
  color: var(--text-brand);
}

.nav-link {
  color: var(--text-sub);
  transition: color 0.2s ease;
}

.nav-link:hover, .nav-link.active {
  color: #f43f5e;
}

.cat-btn {
  background-color: var(--input-bg);
  color: var(--text-sub);
  border: 1px solid var(--border-color);
  transition: all 0.2s ease;
}

.cat-btn:hover, .cat-btn.active {
  background-color: #f43f5e;
  color: #ffffff;
}

.admin-tab-btn {
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
}

.admin-tab-btn.active {
  border-color: #f43f5e;
  color: #f43f5e;
}

/* Card Hover Animation */
.menu-card {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.menu-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
  background: #374151;
  border-radius: 4px;
}