/* PT Metals Visual Enhancement Overrides */
/* Warmer palette, more white space, better hierarchy, brighter images */

/* ========== WARMER CSS VARIABLES ========== */
:root {
  --foreground: 20 15% 12% !important;
  --card-foreground: 20 15% 12% !important;
  --secondary: 30 20% 96% !important;
  --secondary-foreground: 20 15% 12% !important;
  --muted: 30 18% 96% !important;
  --muted-foreground: 20 10% 42% !important;
  --border: 30 15% 90% !important;
  --input: 30 15% 90% !important;
  --primary: 14 100% 62% !important;
  --accent: 14 100% 62% !important;
  --ring: 14 100% 62% !important;
}

/* ========== WARMER GRAYS & BACKGROUNDS ========== */
/* Shift gray-50 / gray-100 backgrounds to warm cream */
.bg-gray-50 {
  background-color: #faf8f5 !important;
}
.bg-gray-100 {
  background-color: #f5f2ed !important;
}
.border-gray-200 {
  border-color: #e8e4de !important;
}
.border-gray-100 {
  border-color: #f0ece6 !important;
}
.text-gray-600 {
  color: #5a544d !important;
}
.text-gray-700 {
  color: #45403a !important;
}
.text-gray-500 {
  color: #7a7368 !important;
}
.text-gray-400 {
  color: #9a9389 !important;
}

/* ========== COLOR UPDATES FOR INLINE STYLES ========== */
/* Catch any rgb(255 90 54) left in compiled CSS -> warmer orange */
.text-eyebrow {
  color: #FF6B3D !important;
}
.btn-primary {
  background-color: #FF6B3D !important;
}
.btn-primary:hover {
  background-color: #E85D30 !important;
}
.btn-secondary {
  color: #1c1816 !important;
  border-color: #e8e4de !important;
}
.btn-secondary:hover {
  background-color: #faf8f5 !important;
}

/* ========== MORE WHITE SPACE & VISUAL HIERARCHY ========== */
/* Increase section padding from py-24 to py-32 */
[class*="py-24"] {
  padding-top: 9rem !important;
  padding-bottom: 9rem !important;
}

/* More breathing room in the hero */
[class*="min-h-screen"][class*="flex"][class*="items-center"] {
  padding-top: 6rem !important;
  padding-bottom: 6rem !important;
}

/* Increase gap between flex columns */
[class*="gap-16"] {
  gap: 5rem !important;
}
[class*="gap-12"] {
  gap: 4rem !important;
}
[class*="gap-6"] {
  gap: 2rem !important;
}

/* More space around headings */
h2[class*="font-heading"],
.font-heading {
  margin-bottom: 0.5em;
}

/* Better card spacing */
.card-light {
  padding: 2rem !important;
  border-radius: 1rem !important;
  border: 1px solid #f0ece6 !important;
  box-shadow: 0 1px 3px rgba(28, 24, 22, 0.04), 0 4px 12px rgba(28, 24, 22, 0.03) !important;
}

/* Grid gap improvements */
[class*="grid"][class*="gap-6"] {
  gap: 2rem !important;
}

/* ========== IMAGE BRIGHTNESS - REMOVE BLUE TINT ========== */
/* Brighten all images and remove cool cast */
img {
  filter: brightness(1.06) saturate(1.08) !important;
}

/* Hero image - lighten the overlay so image shows more */
[class*="from-white\\/95"] {
  --tw-gradient-from: rgba(255, 255, 255, 0.88) !important;
}
[class*="via-white\\/80"] {
  --tw-gradient-via: rgba(255, 255, 255, 0.65) !important;
}
[class*="to-white\\/40"] {
  --tw-gradient-to: rgba(255, 255, 255, 0.25) !important;
}

/* Lighten any dark overlays on images */
[class*="bg-black\\/"],
[class*="bg-\\[#1c1816\\]\\/"] {
  opacity: 0.7 !important;
}

/* Orange accent blobs - make warmer */
[class*="bg-orange-50"] {
  background-color: #fff5ee !important;
}
[class*="bg-orange-100"] {
  background-color: #ffe8d6 !important;
}

/* ========== TYPOGRAPHY REFINEMENTS ========== */
/* Slightly warmer body text */
body {
  color: #1c1816 !important;
  -webkit-font-smoothing: antialiased;
}

/* Loosen up body text line-height for readability */
p {
  line-height: 1.75;
}

/* Subtle letter-spacing on small text */
.text-sm {
  letter-spacing: 0.01em;
}

/* ========== FOOTER WARMTH ========== */
[class*="bg-gray-50"][class*="border-t"] {
  background-color: #faf8f5 !important;
  border-color: #e8e4de !important;
}

/* ========== FOCUS & HOVER STATES ========== */
a:hover {
  color: #FF6B3D;
}

/* Warmer focus ring */
*:focus-visible {
  outline-color: #FF6B3D !important;
}

/* ========== SMOOTH TRANSITIONS ========== */
.card-light,
.btn-primary,
.btn-secondary {
  transition: all 0.25s ease !important;
}

.card-light:hover {
  box-shadow: 0 2px 8px rgba(28, 24, 22, 0.06), 0 8px 24px rgba(28, 24, 22, 0.06) !important;
  transform: translateY(-1px);
}