/* Real Jay Tatts - Custom Dark Editorial Design System */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap');

:root {
  --bg-dark: #0A0A0A;
  --bg-surface: #121212;
  --bg-card: #181818;
  --border-subtle: #262626;
  --border-accent: rgba(229, 224, 216, 0.2);
  --text-main: #F5F2EB;
  --text-muted: #9CA3AF;
  --accent-crimson: #C8102E;
  --accent-ivory: #E5E0D8;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Base Styles */
html {
  scroll-behavior: smooth;
  background-color: var(--bg-dark);
  color: var(--text-main);
  font-family: var(--font-sans);
}

body {
  background-color: var(--bg-dark);
  color: var(--text-main);
  overflow-x: hidden;
  line-height: 1.6;
}

/* Typography Utility */
.font-serif {
  font-family: var(--font-serif);
}

.font-sans {
  font-family: var(--font-sans);
}

.tracking-widest-lg {
  letter-spacing: 0.25em;
}

/* Focus Ring for WCAG AA Accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent-ivory);
  outline-offset: 4px;
}

/* Section Gradient Dividers */
.gradient-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(229, 224, 216, 0.25) 50%, transparent 100%);
}

/* Portfolio Masonry Grayscale to Color Reveal */
.portfolio-card img {
  filter: grayscale(100%) contrast(105%);
  transition: filter 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.portfolio-card:hover img {
  filter: grayscale(0%) contrast(100%);
  transform: scale(1.03);
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #0A0A0A;
}
::-webkit-scrollbar-thumb {
  background: #262626;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #404040;
}

/* Lightbox Modal */
.lightbox-backdrop {
  background-color: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(8px);
}

/* Reduced Motion Respect */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Printable Aftercare Guide Styles */
@media print {
  body {
    background: #ffffff !important;
    color: #000000 !important;
  }
  header, footer, .no-print, .whatsapp-float, .mobile-booking-bar {
    display: none !important;
  }
  .print-only {
    display: block !important;
  }
  .printable-card {
    border: 1px solid #ccc !important;
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
  }
}