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

/* Custom scrollbar styles */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: hsl(var(--accent) / 0.3);
  border-radius: 3px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--accent) / 0.5);
}

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

@layer base {
  :root {
    /* Light blue sky theme */
    --background: 219 100% 98%;
    --foreground: 220 60% 15%;

    --card: 218 100% 99%;
    --card-foreground: 220 60% 15%;

    --popover: 218 100% 99%;
    --popover-foreground: 220 60% 15%;

    --primary: 212 100% 47%;
    --primary-foreground: 210 40% 98%;

    --secondary: 214 100% 95%;
    --secondary-foreground: 220 60% 15%;

    --muted: 214 100% 95%;
    --muted-foreground: 215 40% 50%;

    --accent: 212 100% 47%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 210 40% 98%;

    --border: 213 100% 88%;
    --input: 213 100% 92%;
    --ring: 212 100% 47%;

    --radius: 0.5rem;
    
    /* TechServices IT professional colors */
    --techservices-primary: 212 100% 47%;
    --techservices-accent: 212 100% 50%;
    --techservices-success: 142 76% 36%;
    --techservices-info: 199 89% 48%;
    --techservices-light: 0 0% 100%;
    
    /* Future blue color - darker blue for backgrounds */
    --future-blue: 220 15% 20%;
    --future-blue-light: 220 15% 25%;
    
    /* High contrast colors for dark backgrounds */
    --contact-phone: 142 76% 55%; /* High contrast green for phone */
    --contact-email: 271 91% 75%; /* High contrast purple for email */
    --contact-social: 212 100% 70%; /* High contrast blue for social */
    
    /* Professional gradients */
    --gradient-hero: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(255, 255, 255, 0.8));
    --gradient-overlay: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(249, 250, 251, 0.85));
    --gradient-card: linear-gradient(145deg, rgba(255, 255, 255, 1), rgba(249, 250, 251, 0.8));
    --gradient-accent: linear-gradient(135deg, rgba(59, 130, 246, 1), rgba(99, 102, 241, 1));
    
    /* Clean shadows */
    --shadow-soft: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-glow: 0 0 0 1px rgba(59, 130, 246, 0.05), 0 2px 4px -1px rgba(59, 130, 246, 0.1);
    
    /* Smooth transitions */
    --transition-smooth: all 0.2s ease-in-out;
    --transition-bounce: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    --sidebar-background: 0 0% 100%;
    --sidebar-foreground: 222 47% 11%;
    --sidebar-primary: 212 100% 47%;
    --sidebar-primary-foreground: 210 40% 98%;
    --sidebar-accent: 210 40% 96%;
    --sidebar-accent-foreground: 222 47% 11%;
    --sidebar-border: 214 32% 91%;
    --sidebar-ring: 212 100% 47%;
  }

  .dark {
    /* Softer dark theme with more color */
    --background: 215 28% 17%;
    --foreground: 210 40% 92%;

    --card: 215 28% 19%;
    --card-foreground: 210 40% 92%;

    --popover: 215 28% 19%;
    --popover-foreground: 210 40% 92%;

    --primary: 212 100% 55%;
    --primary-foreground: 0 0% 100%;

    --secondary: 215 28% 25%;
    --secondary-foreground: 210 40% 88%;

    --muted: 215 28% 25%;
    --muted-foreground: 210 20% 70%;

    --accent: 33 100% 65%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 84% 65%;
    --destructive-foreground: 210 40% 92%;

    --border: 215 28% 30%;
    --input: 215 28% 25%;
    --ring: 212 100% 55%;
    
    --sidebar-background: 215 28% 15%;
    --sidebar-foreground: 210 40% 88%;
    --sidebar-primary: 212 100% 55%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 215 28% 22%;
    --sidebar-accent-foreground: 210 40% 88%;
    --sidebar-border: 215 28% 28%;
    --sidebar-ring: 212 100% 55%;
  }
}

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

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