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

/* VICNA NDIS Cleaning Services Design System - All colors MUST be HSL */

@layer base {
  :root {
    /* VICNA Brand Colors - Vibrant and supportive palette */
    --background: 0 0% 100%;
    --foreground: 210 24% 16%;

    --card: 0 0% 100%;
    --card-foreground: 210 24% 16%;

    --popover: 0 0% 100%;
    --popover-foreground: 210 24% 16%;

    /* Primary: Deep blue - trust and professionalism */
    --primary: 225 100% 50%;
    --primary-foreground: 0 0% 100%;
    --primary-hover: 225 100% 45%;

    /* Secondary: Light background with primary accent */
    --secondary: 225 20% 96%;
    --secondary-foreground: 225 100% 50%;

    /* Accent: Vibrant green - care and growth */
    --accent: 120 100% 35%;
    --accent-foreground: 0 0% 100%;
    --accent-hover: 120 100% 30%;

    /* Support colors */
    --muted: 225 20% 94%;
    --muted-foreground: 225 15% 45%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    --border: 225 20% 88%;
    --input: 225 20% 88%;
    --ring: 225 100% 50%;

    --radius: 0.5rem;

    /* Custom gradients and effects for VICNA */
    --gradient-hero: linear-gradient(135deg, hsl(225 100% 50%) 0%, hsl(120 100% 35%) 100%);
    --gradient-subtle: linear-gradient(180deg, hsl(var(--background)) 0%, hsl(var(--muted)) 100%);
    --shadow-soft: 0 4px 6px -1px hsl(225 100% 50% / 0.1), 0 2px 4px -1px hsl(225 100% 50% / 0.06);
    --shadow-medium: 0 10px 15px -3px hsl(225 100% 50% / 0.1), 0 4px 6px -2px hsl(225 100% 50% / 0.05);

    --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: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --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: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 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: 212.7 26.8% 83.9%;
    --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 font-sans;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }

  /* Performance optimizations */
  img {
    font-style: italic;
    background-repeat: no-repeat;
    background-size: cover;
    shape-margin: 0.75rem;
  }
}

@layer components {
  /* Container with max performance */
  .container {
    @apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
  }

  /* Button variants using design system */
  .btn-primary {
    @apply inline-flex items-center justify-center rounded-lg bg-primary px-6 py-3 text-sm font-semibold text-primary-foreground shadow-soft transition-all duration-200 hover:bg-primary/90 hover:shadow-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
  }

  .btn-secondary {
    @apply inline-flex items-center justify-center rounded-lg bg-secondary px-6 py-3 text-sm font-semibold text-secondary-foreground border border-border shadow-soft transition-all duration-200 hover:bg-secondary/80 hover:shadow-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
  }

  .btn-accent {
    @apply inline-flex items-center justify-center rounded-lg bg-accent px-6 py-3 text-sm font-semibold text-accent-foreground shadow-soft transition-all duration-200 hover:bg-accent/90 hover:shadow-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
  }

  .btn-phone {
    @apply inline-flex items-center justify-center rounded-lg bg-gradient-to-r from-primary to-accent px-6 py-3 text-sm font-semibold text-white shadow-medium transition-all duration-200 hover:scale-105 hover:shadow-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 min-h-[44px] min-w-[44px];
  }

  /* USP Grid */
  .usp-grid {
    @apply grid gap-6 md:grid-cols-2 lg:grid-cols-3;
  }

  .usp-card {
    @apply rounded-lg p-6 shadow-soft border border-border transition-all duration-300 hover:shadow-medium;
    background: linear-gradient(135deg, hsl(225 100% 50% / 0.05) 0%, hsl(120 100% 35% / 0.05) 100%);
  }

  .usp-card:hover {
    background: linear-gradient(135deg, hsl(225 100% 50% / 0.4) 0%, hsl(120 100% 35% / 0.4) 100%);
    color: white;
  }

  .usp-card:hover h3,
  .usp-card:hover p {
    color: white;
  }

  /* Badge styles */
  .badge {
    @apply inline-flex items-center rounded-full bg-secondary px-3 py-1 text-xs font-medium text-secondary-foreground;
  }

  .badge-accent {
    @apply inline-flex items-center rounded-full bg-accent px-3 py-1 text-xs font-medium text-accent-foreground;
  }

  /* Form styles */
  .form-input {
    @apply flex h-10 w-full rounded-md border border-input bg-white text-gray-900 px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
  }

  .form-textarea {
    @apply flex min-h-[80px] w-full rounded-md border border-input bg-white text-gray-900 px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
  }

  .form-select {
    @apply flex h-10 w-full items-center justify-between rounded-md border border-input bg-white text-gray-900 px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
  }

  /* Hero gradient background */
  .hero-gradient {
    background: var(--gradient-hero);
  }

  /* Subtle section background */
  .section-subtle {
    background: var(--gradient-subtle);
  }
}