/**
 * light.css — Light color scheme
 * Maps semantic tokens → palette values for light mode.
 */

:root,
[data-scheme="light"] {
  color-scheme: light;

  /* ── Backgrounds ───────────────────────────────────────── */
  --bg-base:      var(--color-gray-50);
  --bg-surface:   #ffffff;
  --bg-elevated:  #ffffff;
  --bg-overlay:   rgba(0, 0, 0, 0.5);
  --bg-subtle:    var(--color-gray-100);
  --bg-muted:     var(--color-gray-200);
  --bg-accent:     var(--color-accent-200);
  --bg-accent-300:     var(--color-accent-300);
  --bg-accent-350:     var(--color-accent-350);
  --bg-accent-400:     var(--color-accent-400);

  /* ── Text ──────────────────────────────────────────────── */
  --text-primary:   var(--color-primary-600);
  --text-secondary: var(--color-gray-accent-500);
  --text-muted:     var(--color-gray-400);
  --text-inverse:   #ffffff;
  --text-on-primary: #ffffff;

  /* ── Borders ───────────────────────────────────────────── */
  --border-default: var(--color-gray-200);
  --border-strong:  var(--color-gray-300);
  --border-focus:   var(--color-primary-500);

  /* ── Brand ─────────────────────────────────────────────── */
  --color-brand:        var(--color-primary-600);
  --color-brand-hover:  var(--color-primary-700);
  --color-brand-light:  var(--color-primary-50);
  --color-brand-ring:   var(--color-primary-300);

  /* ── Components ────────────────────────────────────────── */
  --nav-bg:         #ffffff;
  --nav-border:     var(--color-gray-200);
  --nav-text:       var(--color-gray-700);
  --nav-text-hover: var(--color-primary-600);

  --card-bg:        #ffffff;
  --card-border:    var(--color-gray-200);
  --card-shadow:    var(--shadow-md);

  --input-bg:       #ffffff;
  --input-border:   var(--color-gray-300);
  --input-text:     var(--color-gray-900);
  --input-placeholder: var(--color-gray-400);
  --input-focus-ring: var(--color-primary-500);

  --btn-primary-bg:    var(--color-primary-600);
  --btn-primary-hover: var(--color-primary-700);
  --btn-primary-text:  #ffffff;

  --btn-secondary-bg:    transparent;
  --btn-secondary-border: var(--color-gray-300);
  --btn-secondary-text:   var(--color-gray-700);
  --btn-secondary-hover:  var(--color-gray-100);

  --footer-bg:   var(--color-gray-900);
  --footer-text: var(--color-gray-400);

  --hero-bg:    linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-secondary-600) 100%);
  --hero-text:  #ffffff;
}

/* ── Base styles ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: var(--font-family-sans);
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  /* background-color: var(--bg-base); */
  color: var(--text-primary);
  line-height: 1.6;
  transition: background-color var(--transition-slow), color var(--transition-slow);
}
main {
  margin-top: -50px; 
}

a { color: var(--color-brand); text-decoration: none; }
a:hover { color: var(--color-brand-hover); }

h2 {
  color: var(--text-primary);
}
h4,h5 {
  color: var(--text-secondary);
}
p {
  color: var(--text-secondary);
}

/* ── Navbar styling ───────────────────────────────────────────────────────── */
#main-navbar {
  background: transparent;
  border-bottom: 0;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
}

/* ── Component base (shared between themes) ──────────────────────────────── */
.card {
  background: var(--card-bg);
  border: 0;
  border-radius: var(--radius-xl);
  box-shadow: var(--card-shadow);
  padding: var(--space-6);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-base);
  font-weight: 600;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
}

.btn-light:hover {
    color: var(--color-brand-hover);
        background-color: transparent;
    border-color: transparent;
}

.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}
.btn-primary:hover {
  background: var(--btn-primary-hover);
  color: var(--btn-primary-text);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

.btn-secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border-color: var(--btn-secondary-border);
}
.btn-secondary:hover {
  background: var(--btn-secondary-hover);
}

.btn-link {
  background: var(--btn-secondary-bg);
  color: var(--text-primary);
  /* border-color: var(--btn-secondary-border); */
}

.btn-light {
  background: transparent;
  color: var(--text-primary);
}

.form-group { margin-bottom: var(--space-4); }

.form-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-secondary);
}

.form-control {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--input-bg);
  border: 1.5px solid var(--input-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  color: var(--input-text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
}

.form-control:focus {
  border-color: var(--input-focus-ring);
  box-shadow: 0 0 0 3px var(--color-brand-ring);
}

.form-control::placeholder { color: var(--input-placeholder); }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.alert {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  border-left: 4px solid;
}

.alert-success {
  background: var(--color-success-50);
  border-color: var(--color-success-500);
  color: var(--color-success-700);
}

.alert-error {
  background: var(--color-error-50);
  border-color: var(--color-error-500);
  color: var(--color-error-700);
}

.alert-warning {
  background: var(--color-warning-50);
  border-color: var(--color-warning-500);
  color: var(--color-warning-600);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.badge-primary {
  background: var(--color-brand-light);
  color: var(--color-brand);
}

.bg-accent {
  background-color: var(--bg-accent);
  /* color: var(--color-brand); */
}
.bg-accent-350 {
  background-color: var(--bg-accent-350);
}
.card-accent {
  background-color: var(--bg-accent-300);
  /* color: var(--color-brand); */
}
.btn-info {
  background-color: var(--bg-accent-400);
  /* color: var(--color-brand); */
}

section#about-priority .card {
  width: 100%;
}
@media (min-width: 768px) {
  #about-priority {
    background-image: url('/assets/img/adobeStock_18751417481.png');

    background-repeat: no-repeat;
    background-position: center bottom;
  }

  section#about-priority .card {
    max-width: 48%;
    min-width: 48%;
	}
  section .benefits-cards>div:not(:first-of-type) {
    max-width: 48%;
    min-width: 48%;
	}
}
.text-primary {
  color: var(--text-primary) !important;
}
.text-custom-secondary {
  color: var(--color-gray-500);
}

.bi-flight::before {
  content: url(/assets/icons/travel.svg);
}
.bi-bed::before {
  content: url(/assets/icons/bed.svg);
}
.bi-explore::before {
  content: url(/assets/icons/explore.svg);
}
.bi-directions-boat-cruise::before {
  content: url(/assets/icons/directions_boat.svg);
}
.bi-airport-shuttle::before {
  content: url(/assets/icons/airport_shuttle.svg);
}
.bi-home-work::before {
  content: url(/assets/icons/resort_stays.svg);
}
.bi-award-star::before {
  content: url(/assets/icons/award_star.svg);
}
.bi-shoppingmode::before {
  content: url(/assets/icons/shoppingmode.svg);
}
.bi-group-add::before {
  content: url(/assets/icons/group_add.svg);
}
.bi-checkbook::before {
  content: url(/assets/icons/checkbook.svg);
}
.bi-drafts::before {
  content: url(/assets/icons/drafts.svg);
}
.bi-lock::before {
  content: url(/assets/icons/lock.svg);
}

@media (max-width: 576px) {
    .navbar-brand {
        padding-left: 15px;
    }
}