/*
 * INDIANSPICEROUTE — Theme Variables
 * These semantic vars switch between light and dark mode.
 * Import after colors.css. Use only these vars in component CSS.
 */

/* ── Light Theme (default) ── */
[data-theme="light"] {
  --bg-primary:     var(--india-white);
  --bg-secondary:   var(--saffron-pale);
  --bg-card:        var(--india-white);
  --bg-card-hover:  var(--saffron-light);
  --bg-nav:         var(--india-white);
  --bg-footer:      var(--neutral-900);

  --text-primary:   var(--neutral-900);
  --text-secondary: var(--neutral-700);
  --text-muted:     var(--neutral-500);
  --text-on-dark:   var(--india-white);
  --text-on-accent: var(--india-white);
  --text-footer:    var(--neutral-300);

  --accent-primary:   var(--saffron);
  --accent-primary-hover: var(--saffron-dark);
  --accent-secondary: var(--india-green);
  --accent-secondary-hover: var(--india-green-dark);
  --accent-nav:       var(--saffron);

  --border-color:   var(--neutral-300);
  --border-accent:  var(--saffron);

  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.12);

  --overlay:    rgba(0, 0, 0, 0.4);

  color-scheme: light;
}

/* ── Dark Theme ── */
[data-theme="dark"] {
  --bg-primary:     var(--dark-bg-900);
  --bg-secondary:   var(--dark-bg-800);
  --bg-card:        var(--dark-bg-700);
  --bg-card-hover:  var(--dark-bg-600);
  --bg-nav:         var(--dark-bg-800);
  --bg-footer:      var(--dark-bg-900);

  --text-primary:   var(--dark-text-100);
  --text-secondary: var(--dark-text-200);
  --text-muted:     var(--dark-text-300);
  --text-on-dark:   var(--dark-text-100);
  --text-on-accent: var(--india-white);
  --text-footer:    var(--dark-text-300);

  --accent-primary:   var(--saffron);
  --accent-primary-hover: var(--saffron-dark);
  --accent-secondary: #22DD22;
  --accent-secondary-hover: var(--india-green);
  --accent-nav:       var(--saffron);

  --border-color:   var(--dark-bg-600);
  --border-accent:  var(--saffron);

  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.30);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.40);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.50);

  --overlay:    rgba(0, 0, 0, 0.65);

  color-scheme: dark;
}

/* ── Smooth theme transition ── */
*, *::before, *::after {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.15s ease;
}