@tailwind base;
@tailwind components;
@tailwind utilities;

/* ================================
   A11Y Contrast & Focus Upgrades
   WCAG-compliant color tokens with ≥4.5:1 contrast ratios
   ================================ */
:root {
  /* High contrast background/foreground (≥7:1 ratio) */
  --background: #ffffff;
  --foreground: #0a0a0a; /* nearly black for strong contrast on white */
  
  /* Cards / popover with accessible contrast */
  --card: #ffffff;
  --card-foreground: #111827; /* slate-900 */
  --popover: #ffffff;
  --popover-foreground: #111827;
  
  /* Primary color with 15:1 contrast ratio on white background */
  --primary: #0f172a; /* slate-900 for maximum contrast */
  --primary-foreground: #ffffff;
  --primary-visited: #1e293b; /* slate-800 for visited links */
  --primary-hover: #1e293b;
  
  /* Secondary colors with accessible contrast */
  --secondary: #f8fafc; /* slate-50 */
  --secondary-foreground: #111827;
  
  /* Muted colors maintaining readability */
  --muted: #f1f5f9; /* slate-100 */
  --muted-foreground: #334155; /* slate-700 for ≥4.5:1 */
  
  /* Accent with high contrast */
  --accent: #f59e0b; /* amber-500 */
  --accent-foreground: #111827;
  
  /* Destructive with accessible contrast */
  --destructive: #dc2626; /* red-600 */
  --destructive-foreground: #ffffff;
  
  /* Borders and inputs */
  --border: #e5e7eb; /* gray-200 */
  --input: #e5e7eb;
  --ring: #0f172a; /* matches primary */
  
  /* Button styles with high contrast */
  --btn-primary-bg: #0f172a;
  --btn-primary-fg: #ffffff;
  
  --radius: 12px;
  --font-sans: 'Inter', sans-serif;
  
  --chart-1: hsl(214, 100%, 50%);
  --chart-2: hsl(159.7826, 100%, 36.0784%);
  --chart-3: hsl(42.0290, 92.8251%, 56.2745%);
  --chart-4: hsl(147.1429, 78.5047%, 41.9608%);
  --chart-5: hsl(341.4894, 75.2000%, 50.9804%);
  --sidebar: hsl(0, 0%, 100%);
  --sidebar-foreground: hsl(222.2, 84%, 4.9%);
  --sidebar-primary: hsl(214, 100%, 50%);
  --sidebar-primary-foreground: hsl(210, 40%, 98%);
  --sidebar-accent: hsl(210, 40%, 94%);
  --sidebar-accent-foreground: hsl(214, 100%, 50%);
  --sidebar-border: hsl(214.3, 31.8%, 91.4%);
  --sidebar-ring: hsl(214, 100%, 50%);
  
  --shadow-2xs: 0px 2px 0px 0px hsl(214, 100%, 50% / 0.00);
  --shadow-xs: 0px 2px 0px 0px hsl(214, 100%, 50% / 0.00);
  --shadow-sm: 0px 2px 0px 0px hsl(214, 100%, 50% / 0.00), 0px 1px 2px -1px hsl(214, 100%, 50% / 0.00);
  --shadow: 0px 2px 0px 0px hsl(214, 100%, 50% / 0.00), 0px 1px 2px -1px hsl(214, 100%, 50% / 0.00);
  --shadow-md: 0px 2px 0px 0px hsl(214, 100%, 50% / 0.00), 0px 2px 4px -1px hsl(214, 100%, 50% / 0.00);
  --shadow-lg: 0px 2px 0px 0px hsl(214, 100%, 50% / 0.00), 0px 4px 6px -1px hsl(214, 100%, 50% / 0.00);
  --shadow-xl: 0px 2px 0px 0px hsl(214, 100%, 50% / 0.00), 0px 8px 10px -1px hsl(214, 100%, 50% / 0.00);
  --shadow-2xl: 0px 2px 0px 0px hsl(214, 100%, 50% / 0.00);
  --tracking-normal: 0em;
  --spacing: 0.25rem;
}

/* Dark mode tokens with accessible contrast ratios */
.dark {
  --background: #0b1220;      /* deep navy */
  --foreground: #f8fafc;      /* slate-50 */
  
  --card: #0f172a;            /* slate-900 */
  --card-foreground: #e5e7eb; /* gray-200 */
  --popover: #0f172a;
  --popover-foreground: #e5e7eb;
  
  /* Lighter primary for dark bg; ~#93c5fd on #0b1220 ≈ 5+:1 */
  --primary: #93c5fd;         /* blue-300 */
  --primary-foreground: #0b1220;
  --primary-visited: #bfdbfe; /* blue-200 */
  --primary-hover: #bfdbfe;
  
  --secondary: #1e293b;       /* slate-800 */
  --secondary-foreground: #e2e8f0; /* slate-200 */
  
  --muted: #1e293b;           /* slate-800 */
  --muted-foreground: #94a3b8; /* slate-400 */
  
  --accent: #fbbf24;          /* amber-400 */
  --accent-foreground: #0f172a;
  
  --destructive: #ef4444;     /* red-500 */
  --destructive-foreground: #ffffff;
  
  --border: #1f2937;          /* gray-800 */
  --input: #374151;           /* gray-700 */
  --ring: #93c5fd;            /* matches primary */
  
  /* Button styles for dark mode */
  --btn-primary-bg: #93c5fd;  /* readable with near-black text */
  --btn-primary-fg: #0b1220;
  
  --sidebar: #0f172a;
  --sidebar-foreground: #e5e7eb;
  --sidebar-primary: #93c5fd;
  --sidebar-primary-foreground: #0b1220;
  --sidebar-accent: #1e293b;
  --sidebar-accent-foreground: #93c5fd;
  --sidebar-border: #1f2937;
  --sidebar-ring: #93c5fd;
}

/* Higher contrast mode support for users who prefer it */
@media (prefers-contrast: more) {
  :root {
    --primary: #0f172a;        /* slate-900 for maximum contrast */
    --primary-hover: #0f172a;
    --primary-visited: #0f172a;
    --btn-primary-bg: #0f172a;
  }
  .dark {
    --primary: #cfe3ff;        /* lighter again on dark bg */
    --primary-hover: #e6f0ff;
    --primary-visited: #e6f0ff;
    --btn-primary-bg: #cfe3ff;
  }
}

/* Windows forced-high-contrast modes */
@media (forced-colors: active) {
  * { forced-color-adjust: auto; }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground font-sans antialiased;
    font-weight: 400; /* Slightly raised for readability */
  }

  img {
    content-visibility: auto;
  }

  /* Enhanced link styling for accessibility */
  a, [role="link"] {
    text-underline-offset: 0.18em;
    text-decoration-thickness: 0.1em;
  }

  /* Primary link styles with high contrast */
  .text-primary { 
    color: var(--primary) !important; 
  }
  
  a.text-primary:visited { 
    color: var(--primary-visited) !important; 
  }
  
  a.text-primary:hover, .hover\:underline:hover { 
    color: var(--primary-hover) !important; 
  }

  /* Enhanced focus visibility for keyboard users */
  :where(a, button, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 2px solid var(--primary-hover);
    outline-offset: 3px;
    border-radius: 12px;
  }

  /* Button styles with strong contrast */
  .btn-primary,
  [data-testid="button-text-us-now"],
  a[aria-label="Request a quote for services"],
  a[data-testid="link-request-quote"] {
    background-color: var(--btn-primary-bg) !important;
    color: var(--btn-primary-fg) !important;
    border: 1px solid transparent;
  }

  /* Service card link styling */
  article[data-testid^="card-service"] .text-primary,
  article[data-testid^="card-service"] a,
  article[data-testid^="card-service"] [role="link"] {
    color: var(--primary) !important;
  }

  /* Service type labels with accessible color */
  p[data-testid="service-type"],
  p[data-testid="service-type"].text-primary {
    color: var(--primary) !important;
  }

  /* Testimonials with proper contrast */
  [data-testid^="testimonial-"] { 
    background-color: var(--card) !important;
    color: var(--card-foreground) !important;
    border-color: var(--border) !important;
  }

  /* Ensure small text isn't dimmed */
  .small, .text-sm {
    opacity: 1 !important;
  }

  /* Background and foreground utilities with accessible colors */
  .bg-background { 
    background-color: var(--background) !important; 
    color: var(--foreground) !important; 
  }
  
  .text-foreground { 
    color: var(--foreground) !important; 
  }

  .bg-card { 
    background-color: var(--card) !important; 
    color: var(--card-foreground) !important; 
  }
  
  .border-border { 
    border-color: var(--border) !important; 
  }
}

.mobile-menu {
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
}

.mobile-menu.open {
  transform: translateX(0);
}

.backdrop {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
}

.backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

/* Hero Section Styling */
.hero-section {
  background: linear-gradient(135deg, hsl(var(--accent) / 0.05) 0%, hsl(var(--background)) 100%);
}

.hero-section h1 {
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.hero-section picture img {
  border-radius: 1rem;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* Prose Styling for Content */
.prose {
  color: hsl(var(--muted-foreground));
  line-height: 1.75;
}

.prose h2 {
  color: hsl(var(--foreground));
  font-weight: 700;
  font-size: 1.5rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
  line-height: 1.3;
}

.prose h3 {
  color: hsl(var(--foreground));
  font-weight: 600;
  font-size: 1.25rem;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

.prose p {
  margin-bottom: 1.25rem;
}

.prose strong {
  color: hsl(var(--foreground));
  font-weight: 600;
}

.prose ul, .prose ol {
  padding-left: 1.5rem;
  margin-bottom: 1.25rem;
}

.prose li {
  margin-bottom: 0.5rem;
}

.prose a {
  color: hsl(var(--primary));
  text-decoration: underline;
  transition: color 0.2s;
}

.prose a:hover {
  color: hsl(var(--primary-hover));
}

/* Card Hover Effects */
.bg-card {
  transition: transform 0.2s, box-shadow 0.2s;
}

.bg-card:hover {
  transform: translateY(-2px);
}

/* Smooth Transitions */
a, button {
  transition: all 0.2s ease-in-out;
}

/* ================================
   Westchester Site Custom Styles
   ================================ */
/* Note: --bg, --fg, --muted, --brand are defined in index.html inline CSS */

.grid {
  display: grid;
  gap: 16px;
}

/* Consolidated button styles - .cta and .badge share same styling */
.cta, .badge {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0f62fe 0%, #0353e9 100%);
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  border: none;
  box-shadow: 0 4px 14px 0 rgba(15, 98, 254, 0.39);
  transition: all 0.3s ease;
  text-align: center;
  text-decoration: none;
  user-select: none;
  position: relative;
}

.badge {
  font-size: 15px;
  padding: 12px 24px;
}

.cta:hover, .badge:hover {
  background: linear-gradient(135deg, #0353e9 0%, #023cc7 100%);
  box-shadow: 0 6px 20px 0 rgba(15, 98, 254, 0.5);
  transform: translateY(-2px);
}

.cta:active, .badge:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px 0 rgba(15, 98, 254, 0.35);
}

.card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
}

.kv {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media(min-width:720px) {
  .kv {
    grid-template-columns: 1fr 1fr;
  }
}

.meta {
  color: #000000;
  font-size: 14px;
}

/* Override all gray text colors to black for visibility */
.text-gray-600,
.text-gray-700,
.text-gray-800,
.text-gray-900,
.text-muted,
.text-muted-foreground {
  color: #000000 !important;
}

p, span, li, div:not(.cta):not(.badge):not(.btn) {
  color: #000000;
}

/* Force all header and footer text to be pure white */
header,
header *,
footer,
footer * {
  color: #ffffff !important;
}

/* Keep button text white */
header .cta, header .badge,
footer .cta, footer .badge {
  color: #ffffff !important;
}

/* Links in header/footer are white */
header a, header a:visited, header a:active,
footer a, footer a:visited, footer a:active {
  color: #ffffff !important;
}

header a:hover,
footer a:hover {
  color: #93c5fd !important;
}