/* =======================================================
   1. CORE COLORS & TYPOGRAPHY
======================================================= */

:root {
  /* ===== BASE COLORS ===== */
  --black: #121212;
  --white: #ffffff;
  --red: #b22222;
  --gray: #888;

  /* ===== GOLD PALETTE ===== */
  --gold: #cfa349;
  --gold-2: #f5d38a;
  --gold-3: #8f6b1f;

  /* ===== TYPOGRAPHY ===== */
  --font-title: 'Poppins', sans-serif;
  --font-text: 'Inter', sans-serif;
  --font-alt: "Playfair Display", serif;

  /* ===== RADII ===== */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* ===== BUTTON GLOBAL ===== */
  --button-radius: var(--radius-md);
  --button-padding: 10px 22px;
  --button-font: var(--font-text);
  --button-font-size: 0.95rem;
  --button-weight: 600;
}

/* =======================================================
   2. EXTENDED TOKENS (GRADIENTS, SHADOWS, STATUS)
======================================================= */

:root {
  /* ----- Gradients ----- */
  --grad-gold: linear-gradient(90deg, var(--gold-2), var(--gold));
  --grad-silver: linear-gradient(90deg, #e6e6e6, #bfbfbf);
  --grad-red: linear-gradient(90deg, #ff5252, #d32f2f);
  --grad-green: linear-gradient(90deg, #a9e7b4, #43a047);
  --grad-purple: linear-gradient(90deg, #c68bdc, #9c27b0);
  --grad-blue: linear-gradient(90deg, #7aadde, #1976d2);

  /* ----- Status ----- */
  --status-online: #28d17c;
  --status-offline: #666;
  --status-new: var(--gold);

  /* ----- Shadows ----- */
  --shadow-gold: 0 0 12px rgba(207,163,73,0.6);
  --shadow-red: 0 0 18px rgba(229,57,53,0.7);
  --shadow-bright: 0 0 22px rgba(255,255,255,0.65);

  /* ----- Outlines / Glow ----- */
  --outline-gold: 1px solid var(--gold);
  --outline-red: 1px solid #e74c3c;
  --outline-silver: 1px solid #c0c0c0;

  --glow-gold: 0 0 16px rgba(207,163,73,0.55);
  --glow-red: 0 0 20px rgba(229,57,53,0.65);
  --blur-strong: blur(18px);
}

/* =======================================================
   3. THEME LIGHT
======================================================= */

html[data-theme="light"] {
  --bg: #faf8f3;
  --surface: #ffffff;
  --surface-2: #f9f9f9;
  --surface-alt: #f5f5f5;

  --text: #1a1a1a;
  --muted: #555;
  --border: #ddd;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.12);

  --background-gradient: linear-gradient(135deg, #fff, #f3f2ee);

  /* Buttons */
  --button-primary-bg: linear-gradient(135deg, var(--gold-2), var(--gold));
  --button-primary-text: #1a1a1a;
  --button-primary-hover: linear-gradient(135deg, var(--gold), var(--gold-3));

  --button-secondary-bg: var(--surface);
  --button-secondary-border: var(--gold);
  --button-secondary-text: var(--gold);
  --button-secondary-hover-bg: var(--gold);
  --button-secondary-hover-text: var(--surface);
}

/* =======================================================
   4. LIGHT EXTRAS (COMPONENT-LEVEL OVERRIDES)
======================================================= */

html[data-theme="light"] .section-title,
html[data-theme="light"] .profile-name,
html[data-theme="light"] .review-author {
  color: var(--gold);
}

html[data-theme="light"] .service-item {
  background: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .service-item:hover {
  border-color: var(--gold);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

html[data-theme="light"] .tag.do {
  background: rgba(207, 163, 73, 0.15);
  border-color: var(--gold);
  color: var(--gold);
}

html[data-theme="light"] .tag.receive {
  background: rgba(60, 180, 90, 0.15);
  border-color: #3ac569;
  color: #2e8b57;
}

html[data-theme="light"] .tag.no {
  background: rgba(220, 0, 0, 0.12);
  border-color: #e74c3c;
  color: #b80000;
}

html[data-theme="light"] .review-item {
  background: #fff;
  border: 1px solid #e5e5e5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .gallery-item {
  background: #fff;
  border: 1px solid #ddd;
}

html[data-theme="light"] .gallery-item:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

html[data-theme="light"] .banner-back-btn,
html[data-theme="light"] .profile-share {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--gold);
  color: #000;
}

/* =======================================================
   5. THEME DARK
======================================================= */

html[data-theme="dark"] {
  --bg: #0d0d0e;
  --surface: #151515;
  --surface-2: #1d1d1d;
  --surface-alt: #222;

  --text: #f5f5f5;
  --muted: #aaa;
  --border: #333;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 14px 44px rgba(0, 0, 0, 0.75);

  --background-gradient: linear-gradient(135deg, #1a1a1a, #0a0a0a);

  /* Buttons */
  --button-primary-bg: linear-gradient(135deg, var(--gold), var(--gold-3));
  --button-primary-text: #fff;
  --button-primary-hover: linear-gradient(135deg, var(--gold-2), var(--gold));

  --button-secondary-bg: var(--surface);
  --button-secondary-border: var(--gold);
  --button-secondary-text: var(--gold);
  --button-secondary-hover-bg: var(--gold);
  --button-secondary-hover-text: var(--surface);
}

/* =======================================================
   6. DARK EXTRAS (COMPONENT-LEVEL OVERRIDES)
======================================================= */

/* ============================
   PREMIUM VELVET BURGER ICON
   ============================ */

   .burger-btn {
    width: 32px;
    height: 32px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: transparent;
    border: none;
    outline: none;
  }
  
  .burger-btn .line {
    position: absolute;
    width: 22px;
    height: 2px;
    background: linear-gradient(90deg, #cfa349, #f0ca32);
    box-shadow: 0 0 6px rgba(240,202,50,0.6);
    transition: all 0.25s ease;
  }
  
  .burger-btn .line:nth-child(1) {
    top: 8px;
  }
  
  .burger-btn .line:nth-child(2) {
    top: 15px;
  }
  
  .burger-btn .line:nth-child(3) {
    top: 22px;
  }
  
  /* ANIMATION TO "X" */
  
  .burger-btn.active .line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  
  .burger-btn.active .line:nth-child(2) {
    opacity: 0;
  }
  
  .burger-btn.active .line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }