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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 217 33% 17%;
    
    /* Core Pro Movers Semantic Colors */
    --primary: 25 95% 53%; /* Bright Orange */
    --primary-foreground: 0 0% 100%;
    
    --secondary: 217 33% 17%; /* Dark Blue */
    --secondary-foreground: 0 0% 100%;
    
    --accent: 45 100% 50%;
    --accent-foreground: 217 33% 17%;
    
    --success: 145 59% 49%;
    --success-foreground: 0 0% 100%;
    
    /* WCAG AA Adjusted Contrast: L=40% provides >4.5:1 against L=100% */
    --muted: 210 40% 96%;
    --muted-foreground: 215 16% 40%;
    
    --card: 0 0% 100%;
    --card-foreground: 217 33% 17%;
    
    --popover: 0 0% 100%;
    --popover-foreground: 217 33% 17%;
    
    --border: 214 32% 91%;
    --input: 214 32% 91%;
    --ring: 25 95% 53%;
    
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    --radius: 0.75rem;
  }
  
  .dark {
    --background: 222 47% 11%;
    --foreground: 210 40% 98%;
    
    --primary: 25 95% 53%;
    --primary-foreground: 0 0% 100%;
    
    --secondary: 217 33% 17%;
    --secondary-foreground: 0 0% 100%;
    
    --accent: 45 100% 50%;
    --accent-foreground: 217 33% 17%;
    
    --success: 145 59% 49%;
    --success-foreground: 0 0% 100%;
    
    --muted: 217 33% 17%;
    --muted-foreground: 215 20% 70%;
    
    --card: 222 47% 14%;
    --card-foreground: 210 40% 98%;
    
    --popover: 222 47% 14%;
    --popover-foreground: 210 40% 98%;
    
    --border: 217 33% 20%;
    --input: 217 33% 20%;
    --ring: 25 95% 53%;
    
    --destructive: 0 63% 31%;
    --destructive-foreground: 210 40% 98%;
  }
  
  * {
    border-color: hsl(var(--border));
  }
  
  html {
    scroll-behavior: smooth;
  }
  
  body {
    font-family: "Plus Jakarta Sans", sans-serif;
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    overflow-x: hidden;
    line-height: 1.625;
  }
  
  h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
    line-height: 1.2;
    font-weight: 700;
  }
  
  h1 {
    font-size: 2.5rem;
    letter-spacing: -0.02em;
  }
  
  h2 {
    font-size: 2rem;
  }
  
  h3 {
    font-size: 1.5rem;
  }
  
  @media (min-width: 768px) {
    h1 { font-size: 3.5rem; }
    h2 { font-size: 2.5rem; }
  }

  img {
    max-width: 100%;
    height: auto;
  }

  /* Accessible Focus States */
  *:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
  }

  /* Global Link Styles */
  a {
    color: hsl(var(--primary));
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease-in-out, text-decoration 0.2s ease-in-out;
  }

  a:hover {
    color: hsl(var(--primary) / 0.9);
    text-decoration: underline;
  }

  a:active {
    color: hsl(var(--primary) / 0.8);
  }

  a[href^="mailto:"] {
    color: hsl(var(--muted-foreground));
    text-decoration: underline;
    text-decoration-color: hsl(var(--muted-foreground) / 0.3);
    text-underline-offset: 0.25em;
  }

  a[href^="mailto:"]:hover {
    color: hsl(var(--primary));
    text-decoration-color: hsl(var(--primary) / 0.5);
  }

  a[href^="tel:"] {
    color: hsl(var(--muted-foreground));
    text-decoration: none;
  }

  a[href^="tel:"]:hover {
    color: hsl(var(--primary));
  }
}

@layer components {
  @supports (animation-timeline: auto) {
    .circle-card-container {
      @apply relative w-full aspect-square rounded-full flex flex-col items-center justify-center p-4 sm:p-6 md:p-8 text-center isolate overflow-hidden cursor-pointer shadow-xl transition-all duration-500 hover:shadow-2xl hover:-translate-y-3;
    }
  }
  
  .circle-card-bg {
    @apply absolute inset-0 z-0 transition-transform duration-700 ease-out;
  }
  
  .circle-card-container:hover .circle-card-bg {
    @apply scale-105;
  }
  
  .circle-card-content {
    @apply relative z-10 flex flex-col items-center justify-center h-full w-full;
  }
}

@layer utilities {
  .blur-up {
    filter: blur(10px);
    opacity: 0;
    transition: filter 0.7s ease-out, opacity 0.7s ease-out;
  }

  .blur-up.loaded {
    filter: blur(0);
    opacity: 1;
  }

  .optimized-image-wrapper {
    @apply relative bg-muted/20 overflow-hidden isolate;
  }

  img[loading='lazy']:not(.loaded) {
    @apply bg-muted/20;
  }

  .aspect-preserve {
    @apply w-full h-full object-cover;
  }
}