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

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');

@layer base {
  :root {
    /* Medical Blues - soft, calming palette */
    --background: 200 30% 98%;
    --foreground: 210 40% 15%;

    --card: 200 40% 99%;
    --card-foreground: 210 40% 15%;

    --popover: 200 40% 99%;
    --popover-foreground: 210 40% 15%;

    /* Primary - Teal/Medical Blue */
    --primary: 190 60% 45%;
    --primary-foreground: 200 100% 99%;
    --primary-glow: 190 70% 60%;

    /* Secondary - Soft Blue Gray */
    --secondary: 200 30% 94%;
    --secondary-foreground: 210 40% 25%;

    --muted: 200 25% 92%;
    --muted-foreground: 210 20% 50%;

    /* Accent - Sky Blue */
    --accent: 195 80% 88%;
    --accent-foreground: 210 40% 20%;

    --destructive: 0 70% 55%;
    --destructive-foreground: 0 0% 100%;

    --border: 200 30% 88%;
    --input: 200 30% 90%;
    --ring: 190 60% 45%;

    --radius: 1rem;

    /* Custom Colors */
    --teal: 180 55% 40%;
    --teal-light: 180 60% 85%;
    --sky: 195 85% 85%;
    --sky-deep: 200 70% 50%;
    --warm-white: 40 30% 97%;
    --cool-white: 200 30% 98%;
    --ice: 195 50% 95%;

    /* Glass Effects */
    --glass-bg: 200 40% 99% / 0.7;
    --glass-border: 200 50% 90% / 0.5;
    --glass-shadow: 210 60% 20% / 0.08;

    /* Gradients */
    --gradient-hero: linear-gradient(135deg, hsl(195 85% 95%), hsl(200 40% 98%), hsl(180 50% 95%));
    --gradient-primary: linear-gradient(135deg, hsl(190 60% 45%), hsl(180 55% 40%));
    --gradient-glass: linear-gradient(135deg, hsl(200 40% 99% / 0.9), hsl(200 40% 99% / 0.6));
    --gradient-shine: linear-gradient(120deg, transparent 30%, hsl(0 0% 100% / 0.3) 50%, transparent 70%);

    /* Shadows */
    --shadow-soft: 0 4px 20px -4px hsl(var(--glass-shadow));
    --shadow-glass: 0 8px 32px -8px hsl(210 60% 20% / 0.12), 0 2px 8px -2px hsl(210 60% 20% / 0.08);
    --shadow-glow: 0 0 40px hsl(190 60% 50% / 0.2);
    --shadow-card: 0 10px 40px -10px hsl(210 60% 20% / 0.1);

    --sidebar-background: 200 30% 98%;
    --sidebar-foreground: 210 40% 25%;
    --sidebar-primary: 190 60% 45%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 200 30% 94%;
    --sidebar-accent-foreground: 210 40% 25%;
    --sidebar-border: 200 30% 88%;
    --sidebar-ring: 190 60% 45%;
  }

  .dark {
    --background: 210 40% 8%;
    --foreground: 200 30% 95%;

    --card: 210 35% 12%;
    --card-foreground: 200 30% 95%;

    --popover: 210 35% 12%;
    --popover-foreground: 200 30% 95%;

    --primary: 190 65% 50%;
    --primary-foreground: 210 40% 8%;
    --primary-glow: 190 70% 60%;

    --secondary: 210 30% 18%;
    --secondary-foreground: 200 30% 90%;

    --muted: 210 30% 20%;
    --muted-foreground: 200 20% 60%;

    --accent: 195 50% 25%;
    --accent-foreground: 200 30% 95%;

    --destructive: 0 65% 45%;
    --destructive-foreground: 0 0% 100%;

    --border: 210 30% 20%;
    --input: 210 30% 22%;
    --ring: 190 65% 50%;

    --teal: 180 60% 50%;
    --teal-light: 180 40% 25%;
    --sky: 195 50% 30%;
    --sky-deep: 200 60% 55%;
    --warm-white: 40 10% 15%;
    --cool-white: 210 30% 12%;
    --ice: 195 30% 18%;

    --glass-bg: 210 35% 15% / 0.8;
    --glass-border: 210 30% 30% / 0.5;
    --glass-shadow: 210 60% 5% / 0.4;

    --gradient-hero: linear-gradient(135deg, hsl(210 40% 8%), hsl(210 35% 12%), hsl(200 30% 10%));
    --gradient-primary: linear-gradient(135deg, hsl(190 65% 50%), hsl(180 55% 45%));
    --gradient-glass: linear-gradient(135deg, hsl(210 35% 15% / 0.9), hsl(210 35% 12% / 0.6));

    --shadow-soft: 0 4px 20px -4px hsl(0 0% 0% / 0.4);
    --shadow-glass: 0 8px 32px -8px hsl(0 0% 0% / 0.5), 0 2px 8px -2px hsl(0 0% 0% / 0.3);
    --shadow-glow: 0 0 40px hsl(190 65% 50% / 0.15);
    --shadow-card: 0 10px 40px -10px hsl(0 0% 0% / 0.4);

    --sidebar-background: 210 40% 8%;
    --sidebar-foreground: 200 30% 90%;
    --sidebar-primary: 190 65% 50%;
    --sidebar-primary-foreground: 210 40% 8%;
    --sidebar-accent: 210 30% 18%;
    --sidebar-accent-foreground: 200 30% 90%;
    --sidebar-border: 210 30% 20%;
    --sidebar-ring: 190 65% 50%;
  }
}

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

  body {
    @apply bg-background text-foreground font-sans antialiased;
    font-family: 'Outfit', sans-serif;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
  }
}

@layer components {
  /* Glass Card Effect */
  .glass-card {
    @apply relative overflow-hidden;
    background: var(--gradient-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid hsl(var(--glass-border));
    box-shadow: var(--shadow-glass);
  }

  .glass-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-shine);
    pointer-events: none;
  }

  /* Polished Surface */
  .polished {
    @apply relative;
    background: linear-gradient(
      145deg,
      hsl(var(--card)) 0%,
      hsl(var(--background)) 100%
    );
    box-shadow: 
      var(--shadow-card),
      inset 0 1px 0 hsl(0 0% 100% / 0.1);
  }

  .polished::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, hsl(0 0% 100% / 0.3), transparent);
  }

  /* Glow Effect */
  .glow-primary {
    box-shadow: var(--shadow-glow);
  }

  /* Gradient Text */
  .text-gradient {
    @apply bg-clip-text text-transparent;
    background-image: var(--gradient-primary);
  }

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

  /* Smooth scroll behavior */
  html {
    scroll-behavior: smooth;
  }

  /* Custom scrollbar */
  ::-webkit-scrollbar {
    width: 8px;
  }

  ::-webkit-scrollbar-track {
    background: hsl(var(--muted));
  }

  ::-webkit-scrollbar-thumb {
    background: hsl(var(--primary) / 0.3);
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--primary) / 0.5);
  }
}

@layer utilities {
  .animation-delay-200 {
    animation-delay: 200ms;
  }
  
  .animation-delay-400 {
    animation-delay: 400ms;
  }
  
  .animation-delay-600 {
    animation-delay: 600ms;
  }
}