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

/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. 
All colors MUST be HSL.
*/

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    --primary: 0 74% 42%;
    --primary-foreground: 0 0% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --accent: 0 74% 42%;
    --accent-foreground: 0 0% 98%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 0 74% 42%;

    /* Custom design tokens */
    --hero-gradient: linear-gradient(135deg, hsl(0 74% 35%) 0%, hsl(0 74% 20%) 100%);
    --sacramento-red: 0 74% 42%;
    --sacramento-red-dark: 0 74% 35%;
    --sacramento-red-light: 0 0% 95%;
    --sacramento-gold: 40 80% 50%;
    --professional-gray: 220 9% 35%;
    --warm-gray: 20 14% 96%;
    --emergency: 36 90% 45%;
    --success: 142 70% 45%;
    
    /* Shadows */
    --shadow-professional: 0 10px 30px -10px hsl(var(--sacramento-red) / 0.3);
    --shadow-soft: 0 4px 6px -1px hsl(0 0% 0% / 0.1);
    
    /* Animations */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    --radius: 0.5rem;

    --sidebar-background: 0 0% 98%;

    --sidebar-foreground: 240 5.3% 26.1%;

    --sidebar-primary: 240 5.9% 10%;

    --sidebar-primary-foreground: 0 0% 98%;

    --sidebar-accent: 240 4.8% 95.9%;

    --sidebar-accent-foreground: 240 5.9% 10%;

    --sidebar-border: 220 13% 91%;

    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --primary: 0 74% 50%;
    --primary-foreground: 0 0% 98%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 0 74% 50%;
    --accent-foreground: 0 0% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 0 74% 50%;

    --hero-gradient: linear-gradient(135deg, hsl(0 74% 25%) 0%, hsl(0 74% 10%) 100%);
    --sacramento-red: 0 74% 50%;
    --sacramento-red-dark: 0 74% 25%;
    --sacramento-red-light: 0 0% 95%;
    --sacramento-gold: 40 80% 50%;
    --professional-gray: 220 9% 75%;
    --warm-gray: 20 14% 6%;
    --emergency: 36 90% 45%;
    --success: 142 70% 45%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

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

  body {
    @apply bg-background text-foreground;
  }

  /* ADA Compliance: Skip to content link */
  .skip-to-content {
    @apply absolute -top-12 left-4 z-[100] bg-primary text-primary-foreground px-4 py-2 rounded-md font-semibold;
    transition: top 0.2s ease;
  }
  .skip-to-content:focus {
    @apply top-4;
  }

  /* ADA Compliance: Enhanced focus indicators */
  *:focus-visible {
    @apply outline-2 outline-offset-2 outline-ring;
    outline-style: solid;
  }

  /* ADA Compliance: Reduced motion */
  @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;
    }
  }

  /* Accessibility Widget Modes */
  .a11y-grayscale {
    filter: grayscale(100%);
  }

  .a11y-high-contrast {
    filter: contrast(1.5);
  }

  .a11y-negative-contrast {
    filter: invert(1) hue-rotate(180deg);
  }
  .a11y-negative-contrast img,
  .a11y-negative-contrast video,
  .a11y-negative-contrast svg:not([aria-hidden]) {
    filter: invert(1) hue-rotate(180deg);
  }

  .a11y-light-background {
    background-color: hsl(0 0% 100%) !important;
  }
  .a11y-light-background * {
    background-color: transparent;
  }
  .a11y-light-background section,
  .a11y-light-background header,
  .a11y-light-background footer,
  .a11y-light-background main {
    background-color: hsl(0 0% 100%) !important;
  }

  .a11y-underline-links a {
    text-decoration: underline !important;
    text-underline-offset: 3px;
  }

  .a11y-readable-font,
  .a11y-readable-font * {
    font-family: Arial, Helvetica, sans-serif !important;
    letter-spacing: 0.03em;
    word-spacing: 0.1em;
  }
}