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

:root {
  --background: 0 0% 100%; /* Pure white */
  --foreground: 222 47% 11%; /* Deep slate gray */
  --muted: 210 40% 96%; /* Soft blue-gray */
  --muted-foreground: 215 16% 47%; /* Medium gray */
  --popover: 0 0% 100%; /* Pure white */
  --popover-foreground: 222 47% 11%; /* Deep slate */
  --card: 0 0% 100%; /* Pure white */
  --card-foreground: 222 47% 11%; /* Deep slate */
  --border: 214 32% 91%; /* Light border */
  --input: 214 32% 91%; /* Light input */
  --primary: 221 83% 53%; /* Professional blue */
  --primary-foreground: 0 0% 100%; /* White */
  --secondary: 142 76% 36%; /* Professional green */
  --secondary-foreground: 0 0% 100%; /* White */
  --accent: 210 40% 96%; /* Soft accent */
  --accent-foreground: 222 47% 11%; /* Deep slate */
  --destructive: 0 72% 51%; /* Professional red */
  --destructive-foreground: 0 0% 100%; /* White */
  --success: 142 76% 36%; /* Green */
  --warning: 38 92% 50%; /* Amber */
  --info: 199 89% 48%; /* Cyan */
  --ring: 221 83% 53%; /* Primary ring */
  --radius: 0.5rem;
  --sidebar-background: 222 47% 11%; /* Dark sidebar */
  --sidebar-foreground: 210 40% 98%; /* Light text */
  --sidebar-primary: 221 83% 53%; /* Primary blue */
  --sidebar-primary-foreground: 0 0% 100%; /* White */
  --sidebar-accent: 217 33% 17%; /* Darker accent */
  --sidebar-accent-foreground: 210 40% 98%; /* Light text */
  --sidebar-border: 217 33% 17%; /* Border */
  --sidebar-ring: 221 83% 53%; /* Primary ring */
}

.dark {
  --background: 222 47% 11%; /* Deep slate */
  --foreground: 210 40% 98%; /* Near white */
  --muted: 217 33% 17%; /* Dark gray */
  --muted-foreground: 215 20% 65%; /* Medium gray */
  --popover: 222 47% 11%; /* Deep slate */
  --popover-foreground: 210 40% 98%; /* Near white */
  --card: 217 33% 17%; /* Card background */
  --card-foreground: 210 40% 98%; /* Near white */
  --border: 217 33% 24%; /* Border */
  --input: 217 33% 24%; /* Input */
  --primary: 221 83% 53%; /* Primary blue */
  --primary-foreground: 0 0% 100%; /* White */
  --secondary: 142 76% 36%; /* Green */
  --secondary-foreground: 0 0% 100%; /* White */
  --accent: 217 33% 24%; /* Accent */
  --accent-foreground: 210 40% 98%; /* Light text */
  --destructive: 0 72% 51%; /* Red */
  --destructive-foreground: 0 0% 100%; /* White */
  --success: 142 76% 36%; /* Green */
  --warning: 38 92% 50%; /* Amber */
  --info: 199 89% 48%; /* Cyan */
  --ring: 221 83% 53%; /* Primary ring */
  --sidebar-background: 222 47% 8%; /* Darker sidebar */
  --sidebar-foreground: 210 40% 98%; /* Light text */
  --sidebar-primary: 221 83% 53%; /* Primary blue */
  --sidebar-primary-foreground: 0 0% 100%; /* White */
  --sidebar-accent: 217 33% 24%; /* Accent */
  --sidebar-accent-foreground: 210 40% 98%; /* Light text */
  --sidebar-border: 217 33% 24%; /* Border */
  --sidebar-ring: 221 83% 53%; /* Primary ring */
}

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

  body {
    @apply font-sans antialiased bg-background text-foreground;
  }
}

/* Custom styles for sports management theme */
.success {
  color: hsl(var(--success));
}

.warning {
  color: hsl(var(--warning));
}

.bg-success {
  background-color: hsl(var(--success));
}

.bg-warning {
  background-color: hsl(var(--warning));
}

.text-success {
  color: hsl(var(--success));
}

.text-warning {
  color: hsl(var(--warning));
}

.border-success {
  border-color: hsl(var(--success));
}

.border-warning {
  border-color: hsl(var(--warning));
}

/* Accessibility Mode Styles */
.high-contrast {
  --background: 0 0% 100%;
  --foreground: 0 0% 0%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 0%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 0%;
  --primary: 0 0% 0%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 20%;
  --secondary-foreground: 0 0% 100%;
  --muted: 0 0% 90%;
  --muted-foreground: 0 0% 10%;
  --accent: 0 0% 90%;
  --accent-foreground: 0 0% 10%;
  --destructive: 0 84% 40%;
  --destructive-foreground: 0 0% 100%;
  --border: 0 0% 40%;
  --input: 0 0% 40%;
  --ring: 0 0% 0%;
}

.high-contrast.dark {
  --background: 0 0% 0%;
  --foreground: 0 0% 100%;
  --card: 0 0% 0%;
  --card-foreground: 0 0% 100%;
  --popover: 0 0% 0%;
  --popover-foreground: 0 0% 100%;
  --primary: 0 0% 100%;
  --primary-foreground: 0 0% 0%;
  --secondary: 0 0% 80%;
  --secondary-foreground: 0 0% 0%;
  --muted: 0 0% 10%;
  --muted-foreground: 0 0% 90%;
  --accent: 0 0% 10%;
  --accent-foreground: 0 0% 90%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 0%;
  --border: 0 0% 60%;
  --input: 0 0% 60%;
  --ring: 0 0% 100%;
}

.reduce-motion * {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

.large-text {
  font-size: 120% !important;
}

.large-text h1 { font-size: 2.5rem !important; }
.large-text h2 { font-size: 2rem !important; }
.large-text h3 { font-size: 1.75rem !important; }
.large-text h4 { font-size: 1.5rem !important; }
.large-text h5 { font-size: 1.25rem !important; }
.large-text h6 { font-size: 1.125rem !important; }
.large-text .text-sm { font-size: 1rem !important; }
.large-text .text-xs { font-size: 0.875rem !important; }

.screen-reader *:focus {
  outline: 3px solid hsl(var(--ring)) !important;
  outline-offset: 2px !important;
}

.keyboard-nav *:focus-visible {
  outline: 2px solid hsl(var(--ring)) !important;
  outline-offset: 2px !important;
}

.keyboard-nav button:focus-visible,
.keyboard-nav [role="button"]:focus-visible,
.keyboard-nav input:focus-visible,
.keyboard-nav select:focus-visible,
.keyboard-nav textarea:focus-visible,
.keyboard-nav [tabindex]:focus-visible {
  outline: 2px solid hsl(var(--primary)) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px hsla(var(--primary), 0.2) !important;
}

/* Language-specific styles */
html[dir="rtl"] {
  direction: rtl;
}

html[dir="ltr"] {
  direction: ltr;
}

/* Prevent layout shifts during language changes */
.rtl {
  direction: rtl;
}

.rtl * {
  box-sizing: border-box;
}

/* Ensure proper text alignment */
[dir="rtl"] .text-left {
  text-align: right;
}

[dir="rtl"] .text-right {
  text-align: left;
}

/* Fix sidebar positioning for RTL */
[dir="rtl"] .sidebar {
  right: 0;
  left: auto;
}

/* High contrast specific focus styles */
.high-contrast *:focus,
.high-contrast *:focus-visible {
  outline: 3px solid currentColor !important;
  outline-offset: 2px !important;
}

/* Onboarding styles */
@layer components {
  .onboarding-highlight {
    @apply relative z-30 ring-2 ring-primary ring-offset-2 ring-offset-background rounded-md;
    animation: onboarding-pulse 2s infinite;
  }
  
  @keyframes onboarding-pulse {
    0%, 100% { 
      ring-opacity: 1;
    }
    50% { 
      ring-opacity: 0.5;
    }
  }
}
