@import './brand-kit.css?v=3.0';

/**
 * MAHARAJA INDISCHES RESTAURANT — GLOBAL DESIGN SYSTEM & TOKENS
 * Location: Markt 15, 32423 Minden, Germany
 */

/* Decorative Brand Display Font (Display / Wordmark Accent Only) */
@font-face {
  font-family: "MaharajaDisplay";
  src: url("/assets/fonts/Harrington-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand Color Tokens */
  --brand-purple: #2A0E3D;
  --brand-purple-dark: #1A0828;
  --brand-purple-light: #3D1558;
  --brand-gold: #F2C230;
  --brand-gold-hover: #DFBE7A;
  --brand-gold-light: #FBF2D5;
  --brand-magenta: #C22A9E;
  --brand-magenta-hover: #A81F87;
  --brand-orange-dark: #B85A1F;
  --brand-orange-fill: #E8722C;
  --brand-turmeric: #F5B942;
  --brand-charcoal: #221421;
  --brand-charcoal-muted: #524350;
  --brand-page-bg: #FFFFFF;
  --brand-cream-alt: #FDF8F0;
  --brand-card-cream: #F7F1E8;
  --brand-border-subtle: #E4D9C7;

  /* Typography */
  --font-serif: "Playfair Display", Georgia, serif;
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-script: "Alex Brush", cursive;
  --font-brand-display: "Curlz MT", "Curlz", "MaharajaDisplay", "Harrington", Georgia, cursive, serif;
}

/* Decorative Brand Wordmark & Accent Utility Classes */
.brand-wordmark,
.brand-title,
.brand-accent-text {
  font-family: var(--font-brand-display);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.03em;
}

/* Base Resets & Smooth Scrolling */
html {
  scroll-behavior: smooth;
  font-family: var(--font-sans);
  color: var(--brand-charcoal);
  background-color: var(--brand-page-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip !important;
  max-width: 100vw !important;
  width: 100% !important;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip !important;
  max-width: 100vw !important;
  width: 100% !important;
}

main {
  flex: 1 0 auto;
}

/* Custom Luxury Scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--brand-purple-dark);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, var(--brand-gold), var(--brand-magenta));
  border-radius: 6px;
  border: 2px solid var(--brand-purple-dark);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, var(--brand-gold-hover), var(--brand-magenta-hover));
}

/* Typography Utilities */
.font-serif { font-family: var(--font-serif); }
.font-sans { font-family: var(--font-sans); }
.font-script { font-family: var(--font-script); }

/* Common Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge-gold {
  background-color: rgba(242, 194, 48, 0.15);
  color: var(--brand-gold);
  border: 1px solid rgba(242, 194, 48, 0.35);
}

.badge-magenta {
  background-color: rgba(194, 42, 158, 0.12);
  color: var(--brand-magenta);
  border: 1px solid rgba(194, 42, 158, 0.3);
}

.badge-purple {
  background-color: rgba(42, 14, 61, 0.1);
  color: var(--brand-purple);
  border: 1px solid var(--brand-border-subtle);
}

.badge-green {
  background-color: #DEF7EC;
  color: #03543F;
}

.badge-red {
  background-color: #FDE8E8;
  color: #9B1C1C;
}

/* Common Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--brand-magenta);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.75rem 1.75rem;
  border-radius: 9999px;
  box-shadow: 0 4px 14px rgba(194, 42, 158, 0.3);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  border: none;
}

.btn-primary:hover {
  background-color: var(--brand-magenta-hover);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 20px rgba(194, 42, 158, 0.4);
}

.btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--brand-purple);
  color: var(--brand-gold);
  border: 1px solid rgba(242, 194, 48, 0.4);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.75rem 1.75rem;
  border-radius: 9999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.btn-gold:hover {
  background-color: var(--brand-purple-light);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(242, 194, 48, 0.25);
}

/* Gallery Hero Royal Purple Gradient */
.gallery-hero-gradient {
  background: linear-gradient(135deg, #180524 0%, #2A0E3D 45%, #381352 75%, #180524 100%) !important;
  color: #FFFFFF !important;
  position: relative;
}
.gallery-hero-gradient h1,
.gallery-hero-gradient [class*="font-serif"] {
  color: #FFFFFF !important;
}
.gallery-hero-gradient p {
  color: rgba(255, 255, 255, 0.90) !important;
}

/* Gallery Filter Pills */
.art-filter-pill {
  transition: all 0.2s ease-in-out;
}
.art-filter-pill.active {
  background-color: #2A0E3D !important;
  color: #F2C230 !important;
  border-color: #F2C230 !important;
  box-shadow: 0 4px 12px rgba(42, 14, 61, 0.25);
}
[data-theme="dark"] .art-filter-pill.active {
  background-color: #F2C230 !important;
  color: #1A0828 !important;
  border-color: #F2C230 !important;
  box-shadow: 0 4px 12px rgba(242, 194, 48, 0.3);
}
[data-theme="dark"] .art-filter-pill:not(.active) {
  background-color: #1A0D2A !important;
  color: #F3EDE2 !important;
  border-color: rgba(242, 194, 48, 0.22) !important;
}
[data-theme="dark"] .art-filter-pill:not(.active):hover {
  background-color: #2A0E3D !important;
  color: #F2C230 !important;
  border-color: rgba(242, 194, 48, 0.5) !important;
}

/* Glassmorphism Utilities */
.glass-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--brand-border-subtle);
  border-radius: 1.5rem;
}

.glass-card-dark {
  background: rgba(26, 8, 40, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(242, 194, 48, 0.3);
  border-radius: 1.5rem;
  color: #FFFFFF;
}

/* Floating animation helper */
@keyframes floatSubtle {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}

.float-subtle {
  animation: floatSubtle 4s ease-in-out infinite;
}


/* =========================================================
   ROYAL PURPLE TRANSLUCENT HERO OVERLAY & VIGNETTE
   ========================================================= */
.hero-v3-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(42, 14, 61, 0.68) 0%, rgba(26, 8, 40, 0.88) 75%, rgba(15, 4, 25, 0.96) 100%);
  backdrop-filter: blur(0.5px);
  -webkit-backdrop-filter: blur(0.5px);
  pointer-events: none;
  z-index: 1;
}
/* ============================================================
   DARK MODE — data-theme="dark" on <html>
   Activated by the theme toggle button in the header.
   Luxury Royal Gastronomy Evening Salon Palette.
   ============================================================ */
[data-theme="dark"] {
  --color-bg: #0C0514;          /* Deep Velvet Obsidian Canvas */
  --color-surface: #1A0D2A;     /* Elevated Card Canvas */
  --color-surface2: #140920;    /* Section / Panel Canvas */
  --color-surface3: #241238;    /* Interactive Fields & Pills */
  --color-border: rgba(242, 194, 48, 0.18);
  --color-border-glow: rgba(242, 194, 48, 0.40);
  --color-heading: #FDF4D9;     /* Warm Champagne Ivory (14.8:1 AAA contrast) */
  --color-text: #F3EDE2;        /* Warm Silk Ivory (13.2:1 AAA contrast) */
  --color-text-muted: #C2B3C6;  /* Cashmere Lilac (7.2:1 AAA contrast) */
  --color-gold: #F2C230;        /* Luminous Heritage Gold */
  --color-kicker: #F5A623;      /* Radiant Saffron Amber (9.1:1 AAA contrast) */
  --color-purple: #FDF4D9;      /* Remapped from light purple to Champagne Gold */
  --color-magenta: #E44BC0;
}

[data-theme="dark"] body {
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
}

/* ── 1. High-Contrast Typography Overrides ── */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] .font-serif:not(.text-brand-gold):not(.text-white):not([class*="text-yellow"]):not([class*="text-emerald"]):not([class*="text-amber"]),
[data-theme="dark"] .text-brand-purple,
[data-theme="dark"] .text-brand-purpleDark,
[data-theme="dark"] [class*="text-brand-purple"],
[data-theme="dark"] [class*="text-brand-purpleDark"] {
  color: var(--color-heading) !important;
}

/* Subtitles, Descriptors, and Muted Copy */
[data-theme="dark"] .text-brand-charcoalMuted,
[data-theme="dark"] [class*="text-brand-charcoalMuted"],
[data-theme="dark"] .text-gray-500,
[data-theme="dark"] .text-gray-600 {
  color: var(--color-text-muted) !important;
}

/* Primary Body Text */
[data-theme="dark"] .text-brand-charcoal,
[data-theme="dark"] [class*="text-brand-charcoal"]:not([class*="Muted"]):not([class*="purple"]):not([class*="gold"]) {
  color: var(--color-text) !important;
}

/* Eyebrows, Kickers & Accent Labels */
[data-theme="dark"] .text-brand-orangeDark,
[data-theme="dark"] [class*="text-brand-orangeDark"] {
  color: var(--color-kicker) !important;
}

/* ── 2. Canvas & Surface Elevation Hierarchy ── */
/* Page Canvas and White Sections */
[data-theme="dark"] .bg-brand-pageBg,
[data-theme="dark"] [class*="bg-brand-pageBg"],
[data-theme="dark"] section.bg-brand-pageBg,
[data-theme="dark"] main.bg-brand-pageBg {
  background-color: var(--color-bg) !important;
}

/* Translucent pill inside wizard / cards */
[data-theme="dark"] [class*="bg-brand-pageBg/"] {
  background-color: var(--color-surface3) !important;
  border-color: var(--color-border) !important;
}

/* Translucent white cards (e.g. tandoor experience cards) */
[data-theme="dark"] [class*="bg-white/"] {
  background-color: var(--color-surface) !important;
  border-color: var(--color-border) !important;
}
[data-theme="dark"] [class*="bg-brand-purple/"] {
  background-color: rgba(242, 194, 48, 0.12) !important;
}

/* Base Cards (Dish cards, spice cards, compass cards, reviews) */
[data-theme="dark"] .bg-white,
[data-theme="dark"] [class*="bg-white"]:not(.text-brand-purple):not(.text-brand-charcoal),
[data-theme="dark"] .spice-card,
[data-theme="dark"] .dish-card,
[data-theme="dark"] .review-card,
[data-theme="dark"] .menu-card {
  background-color: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}

/* Alternating Section Panels */
[data-theme="dark"] .bg-brand-creamAlt,
[data-theme="dark"] .bg-brand-cardCream,
[data-theme="dark"] [class*="bg-brand-creamAlt"],
[data-theme="dark"] [class*="bg-brand-cardCream"],
[data-theme="dark"] [class*="bg-[#FDF8F0]"],
[data-theme="dark"] [class*="bg-[#F7F1E8]"],
[data-theme="dark"] [class*="bg-[#F8F6F2]"],
[data-theme="dark"] [class*="bg-[#F4F1ED]"],
[data-theme="dark"] #inline-wizard-container,
[data-theme="dark"] #res-wizard-container {
  background-color: var(--color-surface2) !important;
}

/* Section Dividers & Borders */
[data-theme="dark"] .border-brand-borderSubtle,
[data-theme="dark"] [class*="border-brand-borderSubtle"],
[data-theme="dark"] [class*="border-[#E4D9C7]"],
[data-theme="dark"] hr {
  border-color: var(--color-border) !important;
}

/* ── 3. Jewel-Tone Icon Badges (Compass & Spices) ── */
[data-theme="dark"] .bg-yellow-100 {
  background-color: rgba(242, 194, 48, 0.16) !important;
}
[data-theme="dark"] .text-yellow-600 {
  color: #F2C230 !important;
}
[data-theme="dark"] .bg-green-100 {
  background-color: rgba(16, 185, 129, 0.16) !important;
}
[data-theme="dark"] .text-green-600 {
  color: #34D399 !important;
}
[data-theme="dark"] .bg-orange-100,
[data-theme="dark"] .bg-amber-100 {
  background-color: rgba(245, 166, 35, 0.16) !important;
}
[data-theme="dark"] .text-orange-600,
[data-theme="dark"] .text-amber-600 {
  color: #F5A623 !important;
}
[data-theme="dark"] .bg-red-100 {
  background-color: rgba(239, 68, 68, 0.16) !important;
}
[data-theme="dark"] .text-red-600 {
  color: #F87171 !important;
}
[data-theme="dark"] .bg-purple-100 {
  background-color: rgba(228, 75, 192, 0.16) !important;
}
[data-theme="dark"] .text-purple-600 {
  color: #E44BC0 !important;
}

/* Card Recommendation Footer */
[data-theme="dark"] [data-i18n*="rec"],
[data-theme="dark"] .group > .border-t,
[data-theme="dark"] .border-t.border-brand-borderSubtle {
  border-top-color: rgba(242, 194, 48, 0.18) !important;
  color: var(--color-gold) !important;
}

/* ── 4. Interactive Pills, Form Fields & Radios ── */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: var(--color-surface3) !important;
  color: var(--color-text) !important;
  border: 1.5px solid var(--color-border) !important;
}
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  border-color: var(--color-gold) !important;
  box-shadow: 0 0 0 3px rgba(242, 194, 48, 0.20) !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: rgba(194, 179, 198, 0.55) !important;
}

/* Wizard Radio Buttons */
[data-theme="dark"] .inline-spice-box {
  background-color: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}
[data-theme="dark"] .inline-spice-radio:checked + .inline-spice-box {
  border-color: var(--color-gold) !important;
  background-color: rgba(242, 194, 48, 0.15) !important;
  color: var(--color-gold) !important;
}

/* Category Filter Buttons & Homepage Tabs (Active / Inactive) */
[data-theme="dark"] .category-btn:not(.active),
[data-theme="dark"] .menu-category-btn:not(.active),
[data-theme="dark"] .homepage-tab-btn:not(.menu-tab-active) {
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
  border: 1.5px solid var(--color-border) !important;
}
[data-theme="dark"] .homepage-tab-btn:not(.menu-tab-active) * {
  color: var(--color-text) !important;
}
[data-theme="dark"] .category-btn:not(.active):hover,
[data-theme="dark"] .menu-category-btn:not(.active):hover,
[data-theme="dark"] .homepage-tab-btn:not(.menu-tab-active):hover {
  background-color: var(--color-surface3) !important;
  border-color: var(--color-gold) !important;
  color: var(--color-gold) !important;
}
[data-theme="dark"] .homepage-tab-btn:not(.menu-tab-active):hover * {
  color: var(--color-gold) !important;
}
[data-theme="dark"] .category-btn.active,
[data-theme="dark"] .menu-category-btn.active,
[data-theme="dark"] .homepage-tab-btn.menu-tab-active {
  background-color: #2A0E3D !important;
  color: #F2C230 !important;
  border: 2px solid #F2C230 !important;
  box-shadow: 0 4px 18px rgba(242, 194, 48, 0.35) !important;
}
[data-theme="dark"] .homepage-tab-btn.menu-tab-active * {
  color: #F2C230 !important;
}

/* Quick Date Buttons */
[data-theme="dark"] .quick-date-btn:not(.active):not([data-active="true"]) {
  background-color: var(--color-surface3) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border) !important;
}
[data-theme="dark"] .quick-date-btn:not(.active):not([data-active="true"]):hover {
  border-color: var(--color-gold) !important;
  color: var(--color-gold) !important;
}

/* Wizard Step Indicator Bubbles */
[data-theme="dark"] [id*="step-"][id*="-bubble"]:not(.bg-brand-magenta) {
  background-color: var(--color-surface3) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-muted) !important;
}

/* Date & Time Picker Controls */
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"] {
  color-scheme: dark !important;
  background-color: var(--color-surface3) !important;
  color: var(--color-text) !important;
}

/* Navigation Links */
[data-theme="dark"] .nav-link {
  color: rgba(253, 244, 217, 0.85) !important;
}
[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-link.active {
  color: var(--color-gold) !important;
}

/* Modals & Dialogs */
[data-theme="dark"] .modal-content,
[data-theme="dark"] #dish-modal > div:last-child {
  background-color: var(--color-surface2) !important;
  border: 1px solid var(--color-border-glow) !important;
  color: var(--color-text) !important;
}

/* Card Hover Elevation Glow */
[data-theme="dark"] .spice-card:hover,
[data-theme="dark"] .dish-card:hover,
[data-theme="dark"] .group:hover {
  border-color: var(--color-border-glow) !important;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.65), 0 0 20px rgba(242, 194, 48, 0.12) !important;
}

/* Dark mode toggle button */
.dark-mode-toggle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(242,194,48,0.4);
  background: rgba(255,255,255,0.08);
  color: #F2C230;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  font-size: 15px;
  flex-shrink: 0;
}
.dark-mode-toggle:hover {
  background: rgba(242,194,48,0.15);
  border-color: #F2C230;
}

/* ============================================================
   ACCESSIBILITY � Focus indicators
   Visible keyboard focus ring for all interactive elements
   ============================================================ */
:focus-visible {
  outline: 2px solid #F2C230;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip link (keyboard only) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 4px;
  z-index: 99999;
  background: #2A0E3D;
  color: #F2C230;
  padding: 8px 16px;
  border-radius: 0 0 8px 8px;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
}
.skip-link:focus {
  left: 4px;
}

/* Ensure buttons/links have consistent focus */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #F2C230;
  outline-offset: 2px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}



/* Skip Link Styles */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 4px;
  z-index: 99999;
  background: #2A0E3D;
  color: #F2C230;
  padding: 8px 16px;
  border-radius: 0 0 8px 8px;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  transition: left 0s;
}

/* ============================================================
   FLAVOR COMPASS & CULINARY SPICE GUIDE (COMMERCIAL GRADE)
============================================================ */
#flavor-compass .group:hover {
  border-color: rgba(242, 194, 48, 0.45) !important;
}

[data-theme="dark"] #flavor-compass {
  background-color: #0C0514 !important;
}

[data-theme="dark"] #flavor-compass .bg-white {
  background-color: #1A0D2A !important;
  border-color: rgba(242, 194, 48, 0.22) !important;
}

[data-theme="dark"] #flavor-compass h2,
[data-theme="dark"] #flavor-compass h3,
[data-theme="dark"] #flavor-compass h4 {
  color: #FDF4D9 !important;
}

[data-theme="dark"] #flavor-compass .bg-brand-creamAlt {
  background-color: #140920 !important;
}