/**
 * JPJ Premier Motors — Global Frontend Design System
 * Version: 1.0.0
 * Canonical bright JPJ visual language.
 */

:root {
  --jpj-navy-950: #061547;
  --jpj-navy-900: #081C5E;
  --jpj-navy-800: #0E2A75;
  --jpj-navy-700: #123B96;

  --jpj-orange-600: #F58220;
  --jpj-orange-500: #FF922B;
  --jpj-orange-100: #FFF1E5;

  --jpj-red-600: #EF233C;
  --jpj-red-700: #D71930;
  --jpj-red-100: #FFF0F2;

  --jpj-green-600: #16A34A;
  --jpj-green-100: #EAF8EF;
  --jpj-gold-500: #F4B400;
  --jpj-blue-500: #2F7BF4;
  --jpj-cyan-500: #19B9D1;

  --jpj-white: #FFFFFF;
  --jpj-bg: #F8FAFC;
  --jpj-bg-soft: #F3F6FA;
  --jpj-line: #DDE3EA;
  --jpj-line-soft: #E9EDF2;

  --jpj-text: #101828;
  --jpj-text-2: #344054;
  --jpj-muted: #667085;
  --jpj-muted-2: #98A2B3;

  --jpj-radius-sm: 10px;
  --jpj-radius-md: 14px;
  --jpj-radius-lg: 20px;
  --jpj-radius-xl: 28px;
  --jpj-radius-pill: 999px;

  --jpj-shadow-sm: 0 8px 22px rgba(8, 28, 94, .07);
  --jpj-shadow-md: 0 16px 40px rgba(8, 28, 94, .10);
  --jpj-shadow-lg: 0 26px 70px rgba(6, 21, 71, .14);

  --jpj-ease: cubic-bezier(.2,.7,.2,1);
  --jpj-speed-fast: 160ms;
  --jpj-speed: 220ms;

  --jpj-container: 1240px;
  --jpj-section-pad: clamp(54px, 7vw, 96px);
}

.jpj-surface-white {
  background: var(--jpj-white);
  color: var(--jpj-text);
}

.jpj-surface-soft {
  background: var(--jpj-bg);
  color: var(--jpj-text);
}

.jpj-surface-brand {
  background:
    radial-gradient(circle at 90% 10%, rgba(245,130,32,.20), transparent 28%),
    linear-gradient(135deg, var(--jpj-navy-900), var(--jpj-navy-950));
  color: #fff;
}

.jpj-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--jpj-radius-pill);
  background: linear-gradient(135deg, var(--jpj-red-600), var(--jpj-red-700));
  color: #fff;
  box-shadow: 0 12px 28px rgba(239,35,60,.23);
  font-weight: 800;
  text-decoration: none;
  transition:
    transform var(--jpj-speed-fast) var(--jpj-ease),
    box-shadow var(--jpj-speed-fast) var(--jpj-ease);
}

.jpj-btn-primary:hover,
.jpj-btn-primary:focus-visible {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(239,35,60,.30);
}

.jpj-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid rgba(8,28,94,.14);
  border-radius: var(--jpj-radius-pill);
  background: var(--jpj-white);
  color: var(--jpj-navy-900);
  font-weight: 800;
  text-decoration: none;
  box-shadow: var(--jpj-shadow-sm);
}

.jpj-btn-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--jpj-radius-pill);
  background: linear-gradient(135deg, var(--jpj-orange-600), var(--jpj-orange-500));
  color: var(--jpj-navy-950);
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(245,130,32,.22);
}

.jpj-card {
  border: 1px solid var(--jpj-line-soft);
  border-radius: var(--jpj-radius-lg);
  background: var(--jpj-white);
  box-shadow: var(--jpj-shadow-sm);
}

.jpj-card--feature {
  position: relative;
  overflow: hidden;
}

.jpj-card--feature::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(
    180deg,
    var(--jpj-red-600),
    var(--jpj-orange-600)
  );
}

.jpj-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 0 11px;
  border-radius: var(--jpj-radius-pill);
  font-size: 11px;
  font-weight: 900;
}

.jpj-badge--new {
  background: var(--jpj-orange-100);
  color: #A24D00;
}

.jpj-badge--sold {
  background: var(--jpj-red-100);
  color: var(--jpj-red-700);
}

.jpj-badge--available {
  background: var(--jpj-green-100);
  color: #12763A;
}

.jpj-field input,
.jpj-field select,
.jpj-field textarea {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--jpj-line);
  border-radius: var(--jpj-radius-sm);
  background: var(--jpj-white);
  color: var(--jpj-text);
  box-shadow: none;
}

.jpj-field input:focus,
.jpj-field select:focus,
.jpj-field textarea:focus {
  border-color: var(--jpj-blue-500);
  outline: none;
  box-shadow: 0 0 0 4px rgba(47,123,244,.11);
}

.jpj-eyebrow {
  color: var(--jpj-orange-600);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.jpj-heading {
  margin: 8px 0 0;
  color: var(--jpj-navy-950);
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.03;
  letter-spacing: -.035em;
}

.jpj-container {
  width: min(calc(100% - 32px), var(--jpj-container));
  margin-inline: auto;
}

.jpj-section {
  padding-block: var(--jpj-section-pad);
}

/*
 * Visual balance:
 * Navy + white = structure
 * Orange = energy/highlights
 * Red = primary action
 */

@media (max-width: 640px) {
  :root {
    --jpj-section-pad: 48px;
  }

  .jpj-container {
    width: min(calc(100% - 22px), var(--jpj-container));
  }
}

@media (prefers-reduced-motion: reduce) {
  .jpj-btn-primary {
    transition: none;
  }
}