/* ============================================================
   Princeton Private Car — style.css
   Black & Orange Theme — Full Ground-Up Rebuild
   ============================================================ */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  /* Backgrounds */
  --c-bg:          #0a0a0a;   /* page base              */
  --c-bg-2:        #111111;   /* cards, panels          */
  --c-bg-3:        #191919;   /* nested surfaces        */
  --c-bg-4:        #222222;   /* inputs, selects        */
  --c-nav:         rgba(10,10,10,0.94);

  /* Orange */
  --c-or:          #f47c1f;   /* primary accent         */
  --c-or-h:        #f99240;   /* hover                  */
  --c-or-d:        #d8650d;   /* pressed / deep         */
  --c-or-fill:     rgba(244,124,31,0.10);
  --c-or-border:   rgba(244,124,31,0.30);
  --c-or-glow:     rgba(244,124,31,0.22);

  /* Text */
  --c-t1:   #f0f0f0;   /* primary   — headings, body     */
  --c-t2:   #a8a8a8;   /* secondary — subtext, labels    */
  --c-t3:   #636363;   /* muted     — placeholders       */

  /* Borders */
  --c-b1:   #1e1e1e;   /* hairline                       */
  --c-b2:   #2d2d2d;   /* default                        */
  --c-b3:   #3d3d3d;   /* strong                         */

  /* Shadows */
  --sh-card:   0 2px 16px rgba(0,0,0,0.55);
  --sh-or:     0 4px 24px rgba(244,124,31,0.20);

  /* Ease */
  --ease: cubic-bezier(0.16,1,0.3,1);
}


/* ============================================================
   2. BASE RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--c-bg);
  color: var(--c-t1);
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Every text element gets an explicit light colour so no
   Tailwind dark utility can accidentally win the cascade. */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Cormorant Garamond', serif;
  color: var(--c-t1);
}
p, li, dt, dd, blockquote,
figcaption, address, time, cite {
  color: var(--c-t1);
}
span    { color: inherit; }
strong  { color: var(--c-t1); }
em      { color: var(--c-t2); font-style: italic; }
small, caption, legend { color: var(--c-t2); }
label   { color: var(--c-t2); }

a {
  color: var(--c-or);
  text-decoration: none;
  transition: color .2s ease;
}
a:hover { color: var(--c-or-h); }

img { max-width: 100%; display: block; }


/* ============================================================
   3. TAILWIND COLOUR OVERRIDES
   Every Tailwind class that appears in index.html is listed
   here and remapped to the dark theme.
   ============================================================ */

/* ---- pearl (custom) ---- */
.bg-pearl-base,
.bg-pearl-card   { background-color: var(--c-bg-2)  !important; }
.bg-pearl-surface { background-color: var(--c-bg-3) !important; }
.bg-pearl-muted  { background-color: var(--c-bg-3)  !important; }
.border-pearl-border { border-color: var(--c-b1)    !important; }

/* ---- obsidian text (custom) ---- */
.text-obsidian-base   { color: var(--c-t1) !important; }
.text-obsidian-muted  { color: var(--c-t2) !important; }
.text-obsidian-subtle { color: var(--c-t3) !important; }
.text-obsidian-light  { color: var(--c-t2) !important; }

/* ---- obsidian backgrounds (custom) ---- */
.bg-obsidian-base  { background-color: var(--c-bg)   !important; }
.bg-obsidian-light { background-color: var(--c-bg-2) !important; }

/* ---- white backgrounds ---- */
.bg-white          { background-color: var(--c-bg-2) !important; }
.bg-white\/95      { background-color: rgba(17,17,17,.96) !important; }
.bg-white\/90      { background-color: rgba(17,17,17,.92) !important; }
.bg-white\/10      { background-color: rgba(255,255,255,.06) !important; }
.bg-white\/20      { background-color: rgba(255,255,255,.10) !important; }
.hover\:bg-white:hover   { background-color: var(--c-bg-3) !important; }
.hover\:bg-white\/20:hover { background-color: rgba(255,255,255,.12) !important; }

/* ---- slate backgrounds ---- */
.bg-slate-100 { background-color: var(--c-bg-3) !important; }
.bg-slate-200 { background-color: var(--c-bg-3) !important; }

/* ---- white text ---- */
.text-white  { color: #ffffff !important; }

/* ---- slate text (all dark shades → light) ---- */
.text-slate-100 { color: var(--c-t1) !important; }
.text-slate-200 { color: var(--c-t1) !important; }
.text-slate-300 { color: var(--c-t2) !important; }
.text-slate-400 { color: var(--c-t3) !important; }
.text-slate-500 { color: var(--c-t3) !important; }
.text-slate-600,
.text-slate-700,
.text-slate-800,
.text-slate-900 { color: var(--c-t1) !important; }

/* ---- generic black ---- */
.text-black { color: var(--c-t1) !important; }

/* ---- slate borders ---- */
.border-slate-200 { border-color: var(--c-b1) !important; }
.border-slate-600 { border-color: var(--c-b2) !important; }

/* ---- copper / orange (custom) ---- */
.text-copper        { color: var(--c-or) !important; }
.bg-copper          { background-color: var(--c-or) !important; color: #fff !important; }
.hover\:bg-copper:hover,
.bg-copper-hover    { background-color: var(--c-or-h) !important; }
.hover\:bg-copper-hover:hover { background-color: var(--c-or-d) !important; }
.border-copper      { border-color: var(--c-or) !important; }

/* ---- orange-200 used in hero heading ---- */
.text-orange-200    { color: #f99240 !important; }

/* ---- orange form feedback ---- */
.bg-orange-50       { background-color: var(--c-or-fill)   !important; }
.border-orange-200  { border-color: var(--c-or-border)     !important; }
.text-copper        { color: var(--c-or) !important; }


/* ============================================================
   4. HAIRLINE BORDERS (custom utility classes from HTML)
   ============================================================ */
.hairline-border        { border-color: var(--c-b1); }
.hairline-border-orange { border-color: var(--c-or-border); }

/* Divide utility used in trust strip */
.divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--c-b1) !important;
}


/* ============================================================
   5. HEADER / NAV
   ============================================================ */
#site-header {
  background-color: var(--c-nav)  !important;
  border-bottom-color: var(--c-b1) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* "PRINCETON" brand text in header */
#site-header .text-obsidian-base {
  color: var(--c-t1) !important;
}
#site-header .text-obsidian-muted {
  color: var(--c-t2) !important;
}

/* Mobile drawer */
#mobile-menu {
  background-color: var(--c-bg-2) !important;
  border-bottom-color: var(--c-b1) !important;
}


/* ============================================================
   6. HERO SECTION
   ============================================================ */
.hero-vignette-light {
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.25) 0%,
    rgba(10,10,10,.93) 100%
  );
}

/* Quick reservation bar that sits on the hero */
#hero-quick-form {
  background-color: var(--c-bg-2);
  border: 1px solid var(--c-b1);
}

/* The white card wrapping the form */
.max-w-4xl.bg-white {
  background-color: var(--c-bg-2) !important;
  border-color: var(--c-b1) !important;
}


/* ============================================================
   7. TRUST STRIP
   ============================================================ */
section.border-y.bg-pearl-surface {
  background-color: var(--c-bg-3) !important;
  border-color: var(--c-b1) !important;
}


/* ============================================================
   8. EDITORIAL / ABOUT SECTION
   ============================================================ */
#about { background-color: var(--c-bg) !important; }
#about .bg-white { background-color: var(--c-bg) !important; }

/* Accent corner decoration */
#about .border-copper { border-color: var(--c-or) !important; }


/* ============================================================
   9. FLEET SECTION
   ============================================================ */
#fleet { background-color: var(--c-bg-3) !important; border-color: var(--c-b1) !important; }

/* Fleet cards */
#fleet .group.bg-white {
  background-color: var(--c-bg-2) !important;
  border-color: var(--c-b1) !important;
}
#fleet .group:hover {
  border-color: var(--c-or) !important;
  box-shadow: var(--sh-or);
}

/* Image placeholder background */
#fleet .bg-slate-100 {
  background-color: var(--c-bg-3) !important;
}

/* "Request This Vehicle" button default state */
#fleet button.bg-pearl-surface {
  background-color: var(--c-bg-3) !important;
  color: var(--c-t1) !important;
  border-color: var(--c-b2) !important;
}
#fleet button.hover\:bg-copper:hover {
  background-color: var(--c-or) !important;
  color: #fff !important;
  border-color: var(--c-or) !important;
}

/* Card text */
#fleet .text-obsidian-base { color: var(--c-t1) !important; }
#fleet .text-obsidian-muted { color: var(--c-t2) !important; }


/* ============================================================
   10. SERVICES SECTION
   ============================================================ */
#services { background-color: var(--c-bg) !important; }
#services .bg-white { background-color: var(--c-bg) !important; }

/* Service cards */
#services .bg-pearl-surface {
  background-color: var(--c-bg-2) !important;
  border-color: var(--c-b1) !important;
}
#services .group:hover {
  border-color: var(--c-or) !important;
  box-shadow: var(--sh-card);
}

/* Icon boxes */
#services .bg-white.border {
  background-color: var(--c-bg-3) !important;
  border-color: var(--c-b2) !important;
}
#services .group-hover\:bg-copper {
  transition: background-color .25s ease, color .25s ease;
}

/* Card text */
#services .text-obsidian-base { color: var(--c-t1) !important; }
#services .text-obsidian-muted { color: var(--c-t2) !important; }


/* ============================================================
   11. SERVICE AREAS SECTION
   ============================================================ */
#service-areas {
  background-color: var(--c-bg-3) !important;
  border-color: var(--c-b1) !important;
}

/* Area cards */
#service-areas .bg-white {
  background-color: var(--c-bg-2) !important;
  border-color: var(--c-b1) !important;
}
#service-areas .bg-white:hover {
  border-color: var(--c-or) !important;
  box-shadow: var(--sh-card);
}

/* Icon box inside area cards */
#service-areas .bg-pearl-surface {
  background-color: var(--c-bg-3) !important;
  border-color: var(--c-b2) !important;
}

/* List text */
#service-areas .text-obsidian-base  { color: var(--c-t1) !important; }
#service-areas .text-obsidian-muted { color: var(--c-t2) !important; }

/* CTA button in service areas */
#service-areas .bg-obsidian-base {
  background-color: var(--c-bg-2) !important;
  border: 1px solid var(--c-b2);
  color: var(--c-t1) !important;
}
#service-areas .hover\:bg-copper:hover {
  background-color: var(--c-or) !important;
  color: #fff !important;
}


/* ============================================================
   12. TESTIMONIALS SECTION
   ============================================================ */
#testimonials { background-color: var(--c-bg) !important; }
#testimonials .bg-white { background-color: var(--c-bg) !important; }

/* Review cards */
#testimonials .bg-pearl-surface {
  background-color: var(--c-bg-2) !important;
  border-color: var(--c-b1) !important;
}

/* Review text */
#testimonials .text-obsidian-base   { color: var(--c-t1) !important; }
#testimonials .text-obsidian-muted  { color: var(--c-t2) !important; }
#testimonials .text-obsidian-subtle { color: var(--c-t3) !important; }


/* ============================================================
   13. FINAL CTA BANNER
   ============================================================ */
section.bg-obsidian-base {
  background-color: var(--c-bg) !important;
  border-color: var(--c-b1) !important;
}

/* Overlay gradient */
section.bg-obsidian-base .bg-gradient-to-r {
  background: linear-gradient(
    to right,
    rgba(10,10,10,.96) 0%,
    rgba(10,10,10,.75) 60%,
    transparent 100%
  ) !important;
}


/* ============================================================
   14. FOOTER
   ============================================================ */
footer {
  background-color: var(--c-bg-3) !important;
  border-color: var(--c-b1) !important;
}
footer .text-obsidian-base   { color: var(--c-t1) !important; }
footer .text-obsidian-muted  { color: var(--c-t2) !important; }
footer .text-obsidian-subtle { color: var(--c-t3) !important; }
footer a { color: var(--c-t2); transition: color .2s ease; }
footer a:hover { color: var(--c-or); }
footer hr, footer .hairline-border { border-color: var(--c-b1) !important; }

/* Footer brand */
footer .text-obsidian-base.font-semibold { color: var(--c-t1) !important; }


/* ============================================================
   15. BOOKING MODAL
   ============================================================ */
#booking-modal {
  background-color: rgba(0,0,0,.82) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Modal panel */
#booking-modal > div {
  background-color: var(--c-bg-2) !important;
  border-color: var(--c-b2) !important;
}

/* Modal text */
#booking-modal .text-obsidian-base   { color: var(--c-t1) !important; }
#booking-modal .text-obsidian-muted  { color: var(--c-t2) !important; }
#booking-modal .text-obsidian-subtle { color: var(--c-t3) !important; }

/* Feedback strip */
#form-feedback {
  background-color: var(--c-or-fill)   !important;
  border-color: var(--c-or-border)     !important;
  color: var(--c-or) !important;
}


/* ============================================================
   16. FLOATING MOBILE ACTION BAR
   ============================================================ */
.fixed.bottom-0.bg-white\/95 {
  background-color: rgba(15,15,15,.97) !important;
  border-color: var(--c-b1) !important;
}
.fixed.bottom-0 .bg-pearl-surface {
  background-color: var(--c-bg-2) !important;
  border-color: var(--c-b2) !important;
  color: var(--c-t1) !important;
}


/* ============================================================
   17. FORM INPUTS (global)
   ============================================================ */
input, select, textarea {
  color-scheme: dark;
  background-color: var(--c-bg-4) !important;
  color: var(--c-t1) !important;
  border-color: var(--c-b2) !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}

input::placeholder,
textarea::placeholder { color: var(--c-t3); }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--c-or) !important;
  box-shadow: 0 0 0 3px var(--c-or-glow) !important;
}

/* bg-pearl-surface inputs (hero bar + modal) */
.bg-pearl-surface input,
.bg-pearl-surface select,
.bg-pearl-surface textarea,
input.bg-pearl-surface,
select.bg-pearl-surface,
textarea.bg-pearl-surface {
  background-color: var(--c-bg-4) !important;
  color: var(--c-t1) !important;
  border-color: var(--c-b2) !important;
}


/* ============================================================
   18. ORANGE GRADIENT HEADING TEXT (.orange-gradient-text)
   ============================================================ */
.orange-gradient-text {
  background: linear-gradient(
    135deg,
    #ffffff  0%,
    #f99240 50%,
    #d8650d 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}


/* ============================================================
   19. REVEAL-ON-SCROLL ANIMATION
   ============================================================ */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity  .8s var(--ease),
    transform .8s var(--ease);
}
.reveal-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================================
   20. EYEBROW PILL (hero tag)
   ============================================================ */
.bg-white\/90.border.hairline-border-orange {
  background-color: rgba(17,17,17,.90) !important;
  border-color: var(--c-or-border) !important;
}
.bg-white\/90.border.hairline-border-orange .text-obsidian-base {
  color: var(--c-t1) !important;
}


/* ============================================================
   21. SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track  { background: var(--c-bg); }
::-webkit-scrollbar-thumb  { background: #2a2a2a; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-or); }


/* ============================================================
   22. TEXT SELECTION
   ============================================================ */
::selection { background: var(--c-or); color: #fff; }


/* ============================================================
   23. SECTION SEPARATORS (border-y / border-t utilities)
   ============================================================ */
.border-y { border-color: var(--c-b1); }
.border-t  { border-color: var(--c-b1); }
.border-b  { border-color: var(--c-b1); }

/* Divider lines inside cards */
.border-t.hairline-border { border-color: var(--c-b1) !important; }