/*
Theme Name: Redveil — Indian Restaurant
Theme URI: https://redveil.co.uk
Author: Redveil
Author URI: https://redveil.co.uk
Description: Premium luxury Indian restaurant theme for Redveil, London. Red and black luxury aesthetic with next-level animations. Fully Elementor compatible.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: Proprietary
Text Domain: redveil
Tags: restaurant, indian, luxury, elementor, animated, responsive
*/

/* =====================================================
   CSS CUSTOM PROPERTIES — REDVEIL DESIGN SYSTEM
   ===================================================== */
:root {
  /* ── Red Palette ───────────────────────────── */
  --rv-red:          #C8223C;
  --rv-red-dark:     #7A0018;
  --rv-red-bright:   #F02550;
  --rv-red-deep:     #4A0010;
  --rv-red-glow:     rgba(200, 34, 60, 0.42);

  /* ── Gold Palette ──────────────────────────── */
  --rv-gold:         #D4AF37;
  --rv-gold-light:   #F5D062;
  --rv-gold-bright:  #FFE090;
  --rv-gold-deep:    #9B7820;
  --rv-gold-muted:   rgba(212, 175, 55, 0.5);

  /* ── Dark Backgrounds (warm-tinted blacks) ── */
  --rv-black:        #020101;
  --rv-dark:         #070302;
  --rv-dark-2:       #0E0706;
  --rv-dark-3:       #170C0A;
  --rv-dark-4:       #201210;
  --rv-dark-5:       #2C1916;

  /* ── Warm Grey Shades ──────────────────────── */
  --rv-grey-1:       #1C1210;
  --rv-grey-2:       #2A1C18;
  --rv-grey-3:       #3D2A24;
  --rv-grey-4:       #5A4038;
  --rv-grey-5:       #806058;

  /* ── Text (warm-tinted whites) ─────────────── */
  --rv-white:        #FFF8F5;
  --rv-off-white:    #F0E4DC;
  --rv-text-light:   #C8B4AE;
  --rv-text-muted:   #806860;
  --rv-text-faint:   #4A3530;

  /* ── Typography ────────────────────────────── */
  --font-display:    'Cormorant Garamond', Georgia, serif;
  --font-heading:    'Playfair Display', Georgia, serif;
  --font-body:       'Raleway', sans-serif;
  --font-script:     'Great Vibes', cursive;
  --font-accent:     'Raleway', sans-serif;

  /* ── Spacing ───────────────────────────────── */
  --rv-section-py:   100px;
  --rv-section-px:   5%;
  --rv-container:    1280px;

  /* ── Gradients ─────────────────────────────── */
  --rv-grad-gold:    linear-gradient(135deg, #F5D062 0%, #D4AF37 45%, #9B7820 100%);
  --rv-grad-red:     linear-gradient(135deg, #C8223C 0%, #7A0018 100%);
  --rv-grad-heading: linear-gradient(145deg, #FFF8F0 0%, #EDD8BC 30%, #D4AF37 65%, #A07820 100%);
  --rv-grad-hero:
    radial-gradient(ellipse at 28% 55%, rgba(139,0,20,0.5) 0%, transparent 52%),
    radial-gradient(ellipse at 80% 20%, rgba(180,130,20,0.1) 0%, transparent 45%),
    radial-gradient(ellipse at 65% 88%, rgba(100,0,18,0.28) 0%, transparent 48%),
    linear-gradient(158deg, #030000 0%, #0B0203 45%, #040101 100%);

  /* ── Effects ───────────────────────────────── */
  --rv-transition:      0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --rv-transition-slow: 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  --rv-shadow:          0 20px 60px rgba(0,0,0,0.6);
  --rv-shadow-red:      0 10px 40px rgba(200,34,60,0.45);
  --rv-shadow-gold:     0 10px 40px rgba(212,175,55,0.2);
  --rv-radius:          4px;
  --rv-radius-lg:       12px;
  --rv-border:          1px solid rgba(212,175,55,0.18);
}

/* =====================================================
   RESET & BASE
   ===================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  background-color: var(--rv-dark);
  color: var(--rv-text-light);
  line-height: 1.7;
  overflow-x: hidden;
}

body.elementor-page {
  background-color: var(--rv-dark);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--rv-transition);
}

ul { list-style: none; }

/* =====================================================
   TYPOGRAPHY SCALE
   ===================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--rv-white);
  line-height: 1.2;
  font-weight: 700;
}

.rv-display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

.rv-script {
  font-family: var(--font-script);
  font-weight: 400;
  color: var(--rv-gold);
}

/* =====================================================
   UTILITY CLASSES
   ===================================================== */
.rv-container {
  max-width: var(--rv-container);
  margin: 0 auto;
  padding: 0 var(--rv-section-px);
}

.rv-section {
  padding: var(--rv-section-py) var(--rv-section-px);
}

.rv-section-dark { background: var(--rv-dark); }
.rv-section-darker { background: var(--rv-black); }
.rv-section-card { background: var(--rv-dark-2); }

.rv-text-center { text-align: center; }
.rv-text-gold { color: var(--rv-gold); }
.rv-text-red { color: var(--rv-red); }
.rv-text-white { color: var(--rv-white); }
.rv-text-muted { color: var(--rv-text-muted); }

.rv-gold-line {
  display: block;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--rv-gold), transparent);
  margin: 20px auto;
}

.rv-gold-line-left {
  display: block;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, var(--rv-gold), transparent);
  margin: 20px 0;
}

.rv-eyebrow {
  font-family: var(--font-accent);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--rv-gold);
  display: block;
  margin-bottom: 16px;
}

/* =====================================================
   BUTTONS
   ===================================================== */
.rv-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 40px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--rv-transition);
  border-radius: var(--rv-radius);
}

.rv-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.1);
  transform: translateX(-100%) skewX(-15deg);
  transition: var(--rv-transition);
}

.rv-btn:hover::before { transform: translateX(100%) skewX(-15deg); }

.rv-btn-primary {
  background: linear-gradient(135deg, #C8223C 0%, #7A0018 55%, #C8223C 100%);
  background-size: 200% auto;
  color: var(--rv-white);
  box-shadow: 0 8px 32px rgba(200,34,60,0.38), inset 0 1px 0 rgba(255,255,255,0.12);
  transition: background-position 0.5s, transform 0.3s, box-shadow 0.3s;
}
.rv-btn-primary:hover {
  background-position: right center;
  transform: translateY(-3px);
  box-shadow: 0 16px 52px rgba(200,34,60,0.55), inset 0 1px 0 rgba(255,255,255,0.15);
}

.rv-btn-outline {
  background: transparent;
  color: var(--rv-gold-light);
  border: 1px solid rgba(212,175,55,0.55);
  box-shadow: inset 0 0 18px rgba(212,175,55,0.04);
}
.rv-btn-outline:hover {
  background: rgba(212,175,55,0.07);
  border-color: var(--rv-gold);
  color: var(--rv-gold-bright);
  box-shadow: 0 0 32px rgba(212,175,55,0.18), inset 0 0 18px rgba(212,175,55,0.05);
  transform: translateY(-3px);
}

.rv-btn-ghost {
  background: transparent;
  color: var(--rv-white);
  border: 1px solid rgba(255,255,255,0.25);
}
.rv-btn-ghost:hover {
  border-color: var(--rv-gold);
  color: var(--rv-gold-light);
  transform: translateY(-2px);
}

/* Section heading pattern */
.rv-section-heading {
  margin-bottom: 60px;
}
.rv-section-heading h2 {
  font-size: clamp(2rem, 4vw, 3.5rem);
  margin-bottom: 16px;
}
.rv-section-heading p {
  font-size: 1.05rem;
  color: var(--rv-text-muted);
  max-width: 600px;
}
.rv-section-heading.centered { text-align: center; }
.rv-section-heading.centered p { margin: 0 auto; }