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

/* CSS Custom Properties - MMP Brand Colors with Enhanced Contrast */
:root {
  /* MMP White, Orange & Brown Brand Colors */
  --mmp-white: #FFFFFF;
  --mmp-off-white: #FAFAFA;
  --mmp-light-gray: #F5F5F5;
  --mmp-cream: #FFF8F0;
  --mmp-black: #000000;
  --mmp-near-black: #0A0A0A;
  --mmp-charcoal: #1A1A1A;
  --mmp-dark-gray: #2A2A2A;
  
  /* Brown Variations */
  --mmp-brown-darkest: #1A0F0A;
  --mmp-brown-dark: #2D1810;
  --mmp-brown-deep: #4A2C1A;
  --mmp-brown-medium: #6B3E2A;
  --mmp-brown: #8B4513;
  --mmp-brown-light: #A0522D;
  --mmp-brown-lighter: #CD853F;
  --mmp-tan-dark: #B8860B;
  --mmp-tan: #D2B48C;
  --mmp-tan-light: #DDB892;
  
  /* Orange Variations */
  --mmp-orange-darkest: #B8400A;
  --mmp-orange-dark: #CC5500;
  --mmp-orange: #FF6600;
  --mmp-orange-medium: #FF7F33;
  --mmp-orange-light: #FF8533;
  --mmp-orange-lighter: #FFB366;
  --mmp-orange-pale: #FFE5CC;
  --mmp-orange-cream: #FFF2E5;
  
  /* Enhanced contrast text colors for WCAG AA compliance */
  --mmp-text-primary: #0A0A0A;        /* 20:1 contrast ratio */
  --mmp-text-secondary: #1A1A1A;      /* 18:1 contrast ratio */
  --mmp-text-tertiary: #2A2A2A;       /* 15:1 contrast ratio */
  --mmp-text-muted: #4A4A4A;          /* 9.5:1 contrast ratio */
  --mmp-text-light: #666666;          /* 6.5:1 contrast ratio */
  
  /* White text for dark backgrounds */
  --mmp-text-white: #FFFFFF;
  --mmp-text-off-white: #FAFAFA;
  --mmp-text-light-gray: #F0F0F0;
  
  /* Light mode theme variables */
  --background: var(--mmp-white);
  --foreground: var(--mmp-text-primary);
  --muted: var(--mmp-light-gray);
  --muted-foreground: var(--mmp-text-muted);
  --card: var(--mmp-white);
  --card-foreground: var(--mmp-text-primary);
  --border: #E5E5E5;                   /* Visible border with 3:1 contrast */
  --ring: var(--mmp-orange);
  --secondary: #F8F9FA;
  --secondary-foreground: var(--mmp-text-primary);
}

/* Dark Mode with Enhanced Contrast */
.dark {
  --background: var(--mmp-charcoal);
  --foreground: var(--mmp-text-white);
  --muted: var(--mmp-dark-gray);
  --muted-foreground: #CCCCCC;          /* High contrast muted text */
  --card: var(--mmp-near-black);
  --card-foreground: var(--mmp-text-white);
  --border: #444444;                    /* Visible dark mode borders */
  --ring: var(--mmp-orange);
  --secondary: var(--mmp-dark-gray);
  --secondary-foreground: var(--mmp-text-white);
  
  /* Dark mode adjustments for brand colors */
  --mmp-cream: var(--mmp-brown-darkest);
  --mmp-orange-cream: rgba(255, 102, 0, 0.15);
  --mmp-light-gray: var(--mmp-dark-gray);
}

/* Font definitions */
body {
  font-family: 'Inter', sans-serif;
}

.font-heading {
  font-family: 'Montserrat', sans-serif;
}

.font-body {
  font-family: 'Inter', sans-serif;
}

/* Smooth transitions for theme switching */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* High contrast focus states for accessibility */
:focus-visible {
  outline: 2px solid var(--mmp-orange);
  outline-offset: 2px;
}

/* Selection styling */
::selection {
  background-color: var(--mmp-orange);
  color: var(--mmp-white);
}

/* Custom scrollbar for dark mode */
.dark ::-webkit-scrollbar {
  width: 8px;
}

.dark ::-webkit-scrollbar-track {
  background: var(--mmp-dark-gray);
}

.dark ::-webkit-scrollbar-thumb {
  background: var(--mmp-orange);
  border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: var(--mmp-orange-dark);
}

/* Form improvements for better contrast */
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="tel"],
.dark input[type="number"],
.dark input[type="date"],
.dark select,
.dark textarea {
  background-color: var(--mmp-dark-gray);
  border-color: var(--border);
  color: var(--foreground);
}

.dark input[type="text"]:focus,
.dark input[type="email"]:focus,
.dark input[type="tel"]:focus,
.dark input[type="number"]:focus,
.dark input[type="date"]:focus,
.dark select:focus,
.dark textarea:focus {
  border-color: var(--mmp-orange);
  box-shadow: 0 0 0 2px rgba(255, 102, 0, 0.2);
}

/* Button contrast improvements */
.dark .btn-primary {
  background-color: var(--mmp-orange);
  color: var(--mmp-white);
  border-color: var(--mmp-orange);
}

.dark .btn-primary:hover {
  background-color: var(--mmp-orange-dark);
  border-color: var(--mmp-orange-dark);
}

/* Card and surface contrast improvements */
.dark .card {
  background-color: var(--card);
  border-color: var(--border);
  color: var(--card-foreground);
}

/* High contrast text utilities */
.text-high-contrast {
  color: var(--foreground) !important;
}

.text-medium-contrast {
  color: var(--muted-foreground) !important;
}

/* Dark mode specific overrides for better readability */
.dark .text-gray-300 {
  color: #D1D5DB !important;
}

.dark .text-gray-400 {
  color: #9CA3AF !important;
}

.dark .text-gray-500 {
  color: #6B7280 !important;
}

/* Improved contrast for navigation elements */
.dark nav a {
  color: var(--foreground);
}

.dark nav a:hover {
  color: var(--mmp-orange);
}

/* Better contrast for form error states */
.error-border {
  border-color: #EF4444 !important;
}

.error-text {
  color: #EF4444 !important;
}

.dark .error-text {
  color: #FCA5A5 !important;
}