/**
 * ══════════════════════════════════════════════════════════════════════════════
 * 👑 MAHARAJA INDISCHES RESTAURANT — MASTER BRAND KIT & DESIGN SYSTEM (v3.0)
 * Location: Markt 15, 32423 Minden, Germany
 * 
 * Single Source of Truth for Design Tokens, Typography, Buttons, Cards, Badges & Forms.
 * Shared across: Public Marketing Site, Admin Suite CMS, and Food Order App.
 * ══════════════════════════════════════════════════════════════════════════════
 */

/* ══════════════════════════════════════════════════════════════════════════════
   1. MASTER DESIGN TOKENS
   ══════════════════════════════════════════════════════════════════════════════ */
:root {
  /* Royal Color Palette */
  --royal-purple-deep:   #12041D;
  --royal-purple-dark:   #1A0828;
  --royal-purple:        #2A0E3D;
  --royal-purple-light:  #3D1558;
  --royal-purple-glow:   rgba(42, 14, 61, 0.45);

  /* Heritage Gold */
  --heritage-gold:       #F2C230;
  --heritage-gold-hover: #DFBE7A;
  --heritage-gold-light: #FBF2D5;
  --heritage-gold-glow:  rgba(242, 194, 48, 0.35);

  /* Royal Magenta & Accent */
  --royal-magenta:       #C22A9E;
  --royal-magenta-hover: #A81F87;
  --royal-magenta-glow:  rgba(194, 42, 158, 0.40);
  --royal-orange-dark:   #B85A1F;
  --royal-orange-glow:   rgba(184, 90, 31, 0.30);

  /* Warm Cream & Surface Backgrounds */
  --bg-page-pure:        #FFFFFF;
  --bg-cream-warm:       #FDF8F0;
  --bg-card-cream:       #F7F1E8;
  --border-subtle:       #E4D9C7;
  --border-subtle-glow:  rgba(228, 217, 199, 0.6);

  /* Charcoal Typography Colors */
  --text-charcoal:       #221421;
  --text-charcoal-muted: #524350;
  --text-light-pure:     #FFFFFF;
  --text-light-muted:    rgba(255, 255, 255, 0.75);

  /* Status Colors */
  --status-success:      #10B981;
  --status-warning:      #F59E0B;
  --status-danger:       #EF4444;
  --status-info:         #3B82F6;

  /* Master Gradients */
  --grad-royal-magenta:  linear-gradient(135deg, #C22A9E 0%, #8A156E 100%);
  --grad-royal-gold:     linear-gradient(135deg, #F2C230 0%, #D4AF37 100%);
  --grad-royal-dark:     linear-gradient(135deg, #1A0828 0%, #2A0E3D 100%);
  --grad-card-cream:     linear-gradient(135deg, #FFFFFF 0%, #F7F1E8 100%);

  /* Typography Stacks */
  --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;

  /* Radii */
  --radius-sm:           8px;
  --radius-md:           12px;
  --radius-lg:           18px;
  --radius-xl:           24px;
  --radius-full:         9999px;

  /* Shadows */
  --shadow-sm:           0 2px 8px rgba(26, 8, 40, 0.04);
  --shadow-md:           0 4px 16px rgba(26, 8, 40, 0.08);
  --shadow-lg:           0 10px 30px rgba(26, 8, 40, 0.12);
  --shadow-xl:           0 20px 40px rgba(26, 8, 40, 0.18);
  --shadow-glow-magenta: 0 8px 25px rgba(194, 42, 158, 0.35);
  --shadow-glow-gold:    0 8px 25px rgba(242, 194, 48, 0.35);

  /* Transitions */
  --transition-fast:     0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth:   0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ══════════════════════════════════════════════════════════════════════════════
   1.1 MASTER DARK MODE DESIGN TOKENS (ROYAL EVENING SALON PALETTE)
   ══════════════════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"],
[data-theme="dark"] {
  /* Royal Dark Palette (Obsidian & Deep Velvet Plum) */
  --royal-purple-deep:   #08020D;
  --royal-purple-dark:   #0E0517;
  --royal-purple:        #FDF4D9; /* Headings & Brand Titles: Warm Champagne Ivory */
  --royal-purple-raw:    #1A0828;
  --royal-purple-light:  #241238;
  --royal-purple-glow:   rgba(242, 194, 48, 0.20);

  /* Heritage Gold (Luminous in Dark Mode) */
  --heritage-gold:       #F2C230;
  --heritage-gold-hover: #F8D668;
  --heritage-gold-light: #3D2C08;
  --heritage-gold-glow:  rgba(242, 194, 48, 0.45);

  /* Royal Magenta & Accent (Orchid Glow) */
  --royal-magenta:       #E44BC0;
  --royal-magenta-hover: #F267D2;
  --royal-magenta-glow:  rgba(228, 75, 192, 0.45);
  --royal-orange-dark:   #F5A623; /* Bright Saffron Amber for high-contrast kickers */
  --royal-orange-glow:   rgba(245, 166, 35, 0.35);

  /* Surfaces & Velvet Backgrounds */
  --bg-page-pure:        #0C0514; /* Midnight Velvet Obsidian Canvas */
  --bg-cream-warm:       #140920; /* Layer 1 Surface */
  --bg-card-cream:       #1A0D2A; /* Layer 2 Elevated Surface */
  --bg-card-dark:        #1A0D2A;
  --border-subtle:       rgba(242, 194, 48, 0.18);
  --border-subtle-glow:  rgba(242, 194, 48, 0.40);

  /* High-Contrast Typography */
  --text-charcoal:       #F3EDE2; /* Warm Silk Ivory - Contrast > 13:1 */
  --text-charcoal-muted: #C2B3C6; /* Cashmere Lilac - Contrast > 7:1 */
  --text-light-pure:     #FFFFFF;
  --text-light-muted:    rgba(255, 255, 255, 0.80);
  --text-heading:        #FDF4D9; /* Radiant Champagne Ivory */

  /* Master Dark Gradients */
  --grad-royal-magenta:  linear-gradient(135deg, #E44BC0 0%, #A81F87 100%);
  --grad-royal-gold:     linear-gradient(135deg, #F2C230 0%, #E5A817 100%);
  --grad-royal-dark:     linear-gradient(135deg, #0C0514 0%, #1A0D2A 100%);
  --grad-card-cream:     linear-gradient(135deg, #1A0D2A 0%, #140920 100%);

  /* Dark Shadows with Subtle Warm Rim Lighting */
  --shadow-sm:           0 2px 8px rgba(0, 0, 0, 0.40);
  --shadow-md:           0 6px 20px rgba(0, 0, 0, 0.55);
  --shadow-lg:           0 12px 35px rgba(0, 0, 0, 0.70);
  --shadow-xl:           0 20px 50px rgba(0, 0, 0, 0.85);
  --shadow-glow-magenta: 0 8px 30px rgba(228, 75, 192, 0.35);
  --shadow-glow-gold:    0 8px 30px rgba(242, 194, 48, 0.30);
}

/* ══════════════════════════════════════════════════════════════════════════════
   2. MASTER TYPOGRAPHY SUITE
   ══════════════════════════════════════════════════════════════════════════════ */
.font-brand-serif { font-family: var(--font-serif); }
.font-brand-sans  { font-family: var(--font-sans); }
.font-brand-script{ font-family: var(--font-script); }

/* Display Wordmark */
.brand-wordmark {
  font-family: var(--font-brand-display);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.02em;
}

/* Luxury Section Kickers (Pill Above Headlines) */
.kicker-badge,
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: var(--radius-full);
  background: var(--bg-card-cream);
  border: 1px solid var(--border-subtle);
  color: var(--royal-orange-dark);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  box-shadow: var(--shadow-sm);
  margin-bottom: 10px;
}
.kicker-badge.kicker-magenta {
  color: var(--royal-magenta);
  background: rgba(194, 42, 158, 0.08);
  border-color: rgba(194, 42, 158, 0.25);
}
.kicker-badge.kicker-gold {
  color: var(--heritage-gold);
  background: rgba(242, 194, 48, 0.12);
  border-color: rgba(242, 194, 48, 0.35);
}

/* Standardized Headings */
.heading-hero {
  font-family: var(--font-serif);
  font-size: clamp(32px, 5vw, 54px);
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.heading-section {
  font-family: var(--font-serif);
  font-size: clamp(26px, 3.5vw, 40px);
  font-weight: 700;
  color: var(--royal-purple);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.heading-card {
  font-family: var(--font-serif);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  color: var(--royal-purple);
  line-height: 1.35;
}
.heading-sub {
  font-size: 14px;
  color: var(--text-charcoal-muted);
  line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════════════════════════
   3. MASTER BUTTON SUITE (Unified Buttons)
   ══════════════════════════════════════════════════════════════════════════════ */
.btn-royal-primary,
.btn-royal-gold,
.btn-royal-outline,
.btn-royal-ghost,
.btn-royal-danger,
.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 12px 24px;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition-smooth);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

/* Primary Conversion Button (Royal Magenta) */
.btn-royal-primary,
.btn-primary {
  background: var(--grad-royal-magenta);
  color: #FFFFFF !important;
  box-shadow: var(--shadow-glow-magenta);
}
.btn-royal-primary:hover,
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(194, 42, 158, 0.55);
}
.btn-royal-primary:active,
.btn-primary:active { transform: translateY(0); }

/* Secondary Luxury Button (Heritage Gold) */
.btn-royal-gold {
  background: var(--heritage-gold);
  color: var(--royal-purple) !important;
  box-shadow: var(--shadow-glow-gold);
}
.btn-royal-gold:hover {
  background: #FFFFFF;
  color: var(--royal-purple) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(242, 194, 48, 0.50);
}
.btn-royal-gold:active { transform: translateY(0); }

/* Secondary Clean Button */
.btn-secondary {
  background: #FFFFFF;
  color: var(--text-charcoal) !important;
  border: 1.5px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover {
  background: var(--bg-cream-warm);
  border-color: var(--royal-magenta);
  color: var(--royal-magenta) !important;
  transform: translateY(-1px);
}

/* Glass Outline Button */
.btn-royal-outline {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  border: 1.5px solid var(--heritage-gold);
  color: var(--heritage-gold) !important;
}
.btn-royal-outline:hover {
  background: var(--heritage-gold);
  color: var(--royal-purple) !important;
  transform: translateY(-2px);
}

/* Ghost / Subtle Button */
.btn-royal-ghost {
  background: transparent;
  color: var(--text-charcoal-muted);
  border: 1px solid var(--border-subtle);
}
.btn-royal-ghost:hover {
  background: var(--bg-card-cream);
  color: var(--royal-purple);
  border-color: var(--royal-purple);
}

/* Destructive / Danger Button */
.btn-royal-danger,
.btn-danger {
  background: var(--status-danger);
  color: #FFFFFF !important;
  border-radius: var(--radius-md);
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-royal-danger:hover,
.btn-danger:hover {
  background: #DC2626;
  transform: translateY(-1px);
}

/* Button Sizing Variants */
.btn-sm {
  padding: 7px 16px;
  font-size: 11px;
}
.btn-lg {
  padding: 16px 36px;
  font-size: 14px;
  letter-spacing: 0.1em;
}
.btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--radius-full);
}

/* ══════════════════════════════════════════════════════════════════════════════
   4. MASTER CARDS & CONTAINERS
   ══════════════════════════════════════════════════════════════════════════════ */
.card-luxury-cream {
  background: #FFFFFF;
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-smooth);
}
.card-luxury-cream:hover {
  border-color: rgba(194, 42, 158, 0.4);
  box-shadow: var(--shadow-xl);
  transform: translateY(-3px);
}

.card-luxury-purple {
  background: var(--grad-royal-dark);
  border: 1.5px solid rgba(242, 194, 48, 0.35);
  border-radius: var(--radius-xl);
  color: #FFFFFF;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.card-luxury-glass {
  background: rgba(26, 8, 40, 0.75);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(242, 194, 48, 0.3);
  border-radius: var(--radius-xl);
  color: #FFFFFF;
  padding: 24px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   5. MASTER BADGES & STATUS PILLS
   ══════════════════════════════════════════════════════════════════════════════ */
.badge-luxury,
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
}
.badge-gold,
.badge-yellow {
  background: rgba(242, 194, 48, 0.15);
  color: #D4AF37;
  border: 1px solid rgba(242, 194, 48, 0.4);
}
.badge-magenta {
  background: rgba(194, 42, 158, 0.12);
  color: var(--royal-magenta);
  border: 1px solid rgba(194, 42, 158, 0.35);
}
.badge-success,
.badge-green {
  background: rgba(16, 185, 129, 0.12);
  color: var(--status-success);
  border: 1px solid rgba(16, 185, 129, 0.35);
}
.badge-warning {
  background: rgba(245, 158, 11, 0.12);
  color: var(--status-warning);
  border: 1px solid rgba(245, 158, 11, 0.35);
}
.badge-danger,
.badge-red {
  background: rgba(239, 68, 68, 0.12);
  color: var(--status-danger);
  border: 1px solid rgba(239, 68, 68, 0.35);
}
.badge-gray {
  background: rgba(82, 67, 80, 0.12);
  color: var(--text-charcoal-muted);
  border: 1px solid var(--border-subtle);
}

/* ══════════════════════════════════════════════════════════════════════════════
   6. MASTER FORM CONTROLS
   ══════════════════════════════════════════════════════════════════════════════ */
.form-control-luxury,
.form-input {
  width: 100%;
  background: var(--bg-cream-warm);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-charcoal);
  outline: none;
  transition: all var(--transition-fast);
  box-sizing: border-box;
}
.form-control-luxury:focus,
.form-input:focus {
  border-color: var(--royal-magenta);
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(194, 42, 158, 0.15);
}
.form-label-luxury,
.form-label {
  display: block;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--royal-purple);
  margin-bottom: 6px;
}