/* Raj Travels — semantic design tokens (light / dark)
 *
 * UI workflow: plan palette + component mapping here first, then style in raj-home.css.
 * Components must use these tokens — no one-off hex in component CSS.
 */

html[data-raj-theme="light"] {
  color-scheme: light;
  --raj-gold: #b8861f;
  --raj-gold-bright: #c9921a;
  --raj-green: #096a32;
  --raj-green-bright: #0a7435;
  --raj-green-deep: #064820;
  --raj-brand-red: #e7191b;

  --raj-on-primary: #ffffff;
  --raj-link: #0a7435;
  --raj-link-hover: #064820;
  --raj-focus-ring: #0a7435;

  --raj-page-bg: #f4f8f5;
  --raj-page-bg-accent: rgba(9, 106, 50, 0.07);
  --raj-surface: #ffffff;
  --raj-surface-muted: #eef4f0;
  --raj-surface-sunken: #e6ede8;
  --raj-surface-overlay: rgba(255, 255, 255, 0.96);

  --raj-text: #1a241f;
  --raj-text-strong: #0f1a14;
  --raj-text-inverse: #ffffff;
  --raj-muted: #5c6761;

  --raj-border: rgba(9, 106, 50, 0.16);
  --raj-border-strong: rgba(9, 106, 50, 0.28);
  --raj-shadow: 0 14px 36px rgba(23, 49, 32, 0.08);
  --raj-shadow-soft: 0 4px 14px rgba(23, 49, 32, 0.06);

  --raj-topbar-bg: #e8f0eb;
  --raj-header-bg: #ffffff;
  --raj-nav-bg: rgba(255, 255, 255, 0.97);
  --raj-footer-bg: #eef4f0;

  --raj-nav-hover-bg: rgba(9, 106, 50, 0.08);
  --raj-nav-active-text: #ffffff;

  --raj-field-bg: #ffffff;
  --raj-field-bg-hover: #f7fbf8;
  --raj-field-text: #173120;
  --raj-field-placeholder: #7a8680;
  --raj-field-border: rgba(9, 106, 50, 0.2);
  --raj-field-border-focus: #0a7435;
  --raj-field-focus-ring: rgba(9, 106, 50, 0.14);

  --raj-dropdown-bg: #ffffff;
  --raj-dropdown-text: #173120;
  --raj-dropdown-muted: rgba(23, 49, 32, 0.68);
  --raj-dropdown-hover: rgba(9, 106, 50, 0.08);
  --raj-dropdown-hover-text: #064820;

  --raj-search-card-bg: #ffffff;
  --raj-search-panel-bg: #f7faf8;
  --raj-search-tab-bar: #eef4f0;
  --raj-search-tab-text: #4f5c56;
  --raj-search-tab-text-active: #ffffff;
  --raj-search-tab-active-bg: linear-gradient(180deg, #0a7435, #064820);
  --raj-search-heading: #173120;

  --raj-btn-primary-bg: linear-gradient(180deg, #0a7435, #064820);
  --raj-btn-primary-hover: linear-gradient(180deg, #119046, #0a5d2d);
  --raj-btn-primary-text: #ffffff;

  --raj-hero-overlay: linear-gradient(90deg, rgba(247, 251, 248, 0.94) 0%, rgba(247, 251, 248, 0.72) 42%, rgba(247, 251, 248, 0.15) 100%);
  --raj-hero-fade: linear-gradient(180deg, rgba(247, 251, 248, 0.08), #f4f8f5);

  --raj-panel-bg: #ffffff;
  --raj-panel-border: rgba(9, 106, 50, 0.14);
  --raj-card-elevated-bg: linear-gradient(180deg, #ffffff 0%, #f7faf8 100%);
  --raj-section-band-bg: linear-gradient(180deg, #eef4f0 0%, #e8f0eb 100%);
  --raj-testimonial-bg: linear-gradient(180deg, #f3f8f5 0%, #eef4f0 100%);

  --raj-mobile-menu-bg: #ffffff;
  --raj-backdrop: rgba(15, 26, 20, 0.42);
  --raj-input-scheme: light;
  --raj-calendar-filter: none;
}

html[data-raj-theme="dark"] {
  color-scheme: dark;
  --raj-gold: #f2b94f;
  --raj-gold-bright: #ffd46f;
  --raj-green: #096a32;
  --raj-green-bright: #27a84f;
  --raj-green-deep: #064820;
  --raj-brand-red: #e7191b;

  --raj-on-primary: #fff8ea;
  --raj-link: #f2b94f;
  --raj-link-hover: #ffd46f;
  --raj-focus-ring: #f2b94f;

  --raj-page-bg: #020302;
  --raj-page-bg-accent: rgba(9, 106, 50, 0.28);
  --raj-surface: #07100b;
  --raj-surface-muted: #0a120d;
  --raj-surface-sunken: #050806;
  --raj-surface-overlay: rgba(3, 6, 4, 0.97);

  --raj-text: #fff8ea;
  --raj-text-strong: #ffffff;
  --raj-text-inverse: #fff8ea;
  --raj-muted: #dac8a6;

  --raj-border: rgba(242, 185, 79, 0.28);
  --raj-border-strong: rgba(242, 185, 79, 0.56);
  --raj-shadow: 0 24px 54px rgba(0, 0, 0, 0.36);
  --raj-shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.24);

  --raj-topbar-bg: #010101;
  --raj-header-bg: #020302;
  --raj-nav-bg: rgba(3, 6, 4, 0.97);
  --raj-footer-bg: #030503;

  --raj-nav-hover-bg: rgba(242, 185, 79, 0.12);
  --raj-nav-active-text: #fff8ea;

  --raj-field-bg: rgba(255, 248, 234, 0.06);
  --raj-field-bg-hover: rgba(255, 248, 234, 0.09);
  --raj-field-text: #fff8ea;
  --raj-field-placeholder: rgba(255, 248, 234, 0.55);
  --raj-field-border: rgba(242, 185, 79, 0.22);
  --raj-field-border-focus: #f2b94f;
  --raj-field-focus-ring: rgba(242, 185, 79, 0.12);

  --raj-dropdown-bg: #07100b;
  --raj-dropdown-text: #fff8ea;
  --raj-dropdown-muted: rgba(255, 248, 234, 0.72);
  --raj-dropdown-hover: rgba(242, 185, 79, 0.16);
  --raj-dropdown-hover-text: #fff8ea;

  --raj-search-card-bg: linear-gradient(180deg, #07100b, #030504);
  --raj-search-panel-bg: linear-gradient(180deg, #0a120d, #050806);
  --raj-search-tab-bar: rgba(242, 185, 79, 0.08);
  --raj-search-tab-text: rgba(255, 248, 234, 0.78);
  --raj-search-tab-text-active: #fff8ea;
  --raj-search-tab-active-bg: linear-gradient(180deg, #0a7435, #064820);
  --raj-search-heading: #fff8ea;

  --raj-btn-primary-bg: linear-gradient(180deg, #0a7435, #064820);
  --raj-btn-primary-hover: linear-gradient(180deg, #119046, #0a5d2d);
  --raj-btn-primary-text: #fff8ea;

  --raj-hero-overlay: linear-gradient(90deg, rgba(2, 3, 2, 0.98) 0%, rgba(2, 3, 2, 0.76) 42%, rgba(2, 3, 2, 0.18) 100%);
  --raj-hero-fade: linear-gradient(180deg, rgba(2, 3, 2, 0.05), #020302);

  --raj-panel-bg: rgba(3, 8, 5, 0.82);
  --raj-panel-border: rgba(242, 185, 79, 0.28);
  --raj-card-elevated-bg: linear-gradient(180deg, rgba(12, 20, 14, 0.98) 0%, rgba(5, 8, 6, 0.98) 100%);
  --raj-section-band-bg: linear-gradient(180deg, #09110c 0%, #0f1812 100%);
  --raj-testimonial-bg: linear-gradient(180deg, #101a13 0%, #0b120d 100%);

  --raj-mobile-menu-bg: #020302;
  --raj-backdrop: rgba(0, 0, 0, 0.62);
  --raj-input-scheme: dark;
  --raj-calendar-filter: invert(1) sepia(0.2) saturate(0.6) brightness(1.1);
}

/* Default before JS: light */
html:not([data-raj-theme]) {
  color-scheme: light;
}