/* =============================================================
   Wise (fintech) — Skin
   Source: skins/wise/DESIGN.md (getdesign.md/wise)

   Token-only overrides + explicit CTA styling.
   NO broad element selectors (button, input, [class*=...]) —
   everything inherits from style.css / booking-form.css unless
   specifically targeted by class name here.

   Note: Wise Sans is proprietary. This skin substitutes Inter 900
   for display text — the extreme weight IS the Wise identity.
   ============================================================= */

:root {
  /* ── Layer 1: Wise raw palette ──────────────────────────── */
  --wise-green:       #9fe870;
  --wise-green-dark:  #163300;
  --wise-green-light: #e2f6d5;
  --wise-green-pastel:#cdffad;
  --wise-black:       #0e0f0c;
  --wise-dark:        #454745;
  --wise-gray:        #868685;
  --wise-surface:     #e8ebe6;
  --wise-white:       #ffffff;
  --wise-positive:    #054d28;
  --wise-danger:      #d03238;
  --wise-warning:     #ffd11a;
  --wise-orange:      #ffc091;

  /* ── Layer 3: Project variable overrides ────────────────── */
  --color-primary:    var(--wise-green);
  --color-primary-dk: var(--wise-green-dark);
  --color-secondary:  var(--wise-green);
  --color-bg:         var(--wise-white);
  --color-bg-alt:     #f7faf4;
  --color-bg-dark:    var(--wise-black);
  --color-text:       var(--wise-black);
  --color-muted:      var(--wise-dark);
  --color-border:     var(--wise-surface);
  --color-success:    var(--wise-positive);
  --color-white:      var(--wise-white);
  --radius: .75rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.5rem;
  --shadow-sm: 0 1px 3px rgba(14, 15, 12, .06);
  --shadow-md: 0 2px 8px rgba(14, 15, 12, .08);
  --shadow-lg: 0 4px 16px rgba(14, 15, 12, .10);
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --transition: .2s ease;
}

/* ── Global ───────────────────────────────────────────────── */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "calt";
}

body {
  color: var(--wise-black);
  background: var(--wise-white);
}

/* ── Typography — Inter 900 as display (Wise Sans substitute) */
h1 { font-weight: 900; line-height: 0.92; letter-spacing: -0.02em; }
h2 { font-weight: 900; line-height: 0.92; letter-spacing: -0.01em; }
h3 { font-weight: 700; line-height: 1.15; }
h4 { font-weight: 600; line-height: 1.23; letter-spacing: -0.01em; }
h5, h6 { font-weight: 600; }

/* Links */
a { color: var(--wise-green-dark); text-decoration: none; }
a:hover { color: var(--wise-black); text-decoration: underline; }

/* ── Focus ring — Wise green ─────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--wise-green);
  outline-offset: 2px;
}

/* ── Header / nav ────────────────────────────────────────── */
.site-header {
  background: var(--wise-white) !important;
  border-bottom: 1px solid var(--wise-surface) !important;
  box-shadow: none !important;
}

/* ── Alternating section bands ───────────────────────────── */
.section--alt { background: var(--color-bg-alt); }

/* ── Hero ────────────────────────────────────────────────── */
.hero { background: var(--wise-black); }
.hero::before {
  background: linear-gradient(
    180deg,
    rgba(14, 15, 12, 0.50) 0%,
    rgba(14, 15, 12, 0.78) 100%
  ) !important;
}
.hero h1 { font-weight: 900; line-height: 0.92; letter-spacing: -0.02em; }

/* ── Explicit CTA buttons — Wise Green pill ──────────────── */
.car-card__cta {
  background: var(--wise-green) !important;
  color: var(--wise-green-dark) !important;
  border-radius: var(--radius);
  font-weight: 600 !important;
  border: none !important;
}
.car-card__cta:hover {
  background: var(--wise-green-pastel) !important;
}

.booking-form__submit {
  background: var(--wise-green) !important;
  color: var(--wise-green-dark) !important;
  border-radius: .75rem !important;
  font-weight: 600 !important;
  border: none !important;
}
.booking-form__submit:hover {
  background: var(--wise-green-pastel) !important;
}

.contact-form__submit {
  background: var(--wise-green) !important;
  color: var(--wise-green-dark) !important;
  border-radius: .75rem !important;
  font-weight: 600 !important;
  border: none !important;
}
.contact-form__submit:hover {
  background: var(--wise-green-pastel) !important;
}

/* ── Tab buttons ─────────────────────────────────────────── */
.tab-btn.is-active {
  background: var(--wise-green-dark) !important;
  color: var(--wise-white) !important;
}

/* ── Tags / pills — Light mint ───────────────────────────── */
.tag, .pill, .badge, .chip {
  background: var(--wise-green-light) !important;
  color: var(--wise-green-dark) !important;
}

/* ── Footer ──────────────────────────────────────────────── */
.site-footer {
  background: var(--wise-black);
  color: var(--wise-surface);
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
  }
}