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

/* Custom Fonts */
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/montserrat-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/montserrat-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/montserrat-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Figtree';
  src: url('/fonts/figtree-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Figtree';
  src: url('/fonts/figtree-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Figtree';
  src: url('/fonts/figtree-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* SaferWHOIS Design System - Forest Ranger/National Park Theme */
@layer base {
  :root {
    /* Light theme - default */
    --background: 0 0% 100%;
    --foreground: 130 27% 15%;

    --card: 40 25% 98%;
    --card-foreground: 130 27% 15%;

    --popover: 40 25% 98%;
    --popover-foreground: 130 27% 15%;

    /* Blue - Trust, reliability, professionalism */
    --primary: 210 90% 45%;
    --primary-foreground: 0 0% 100%;

    /* Park Khaki - Service and approachability */
    --secondary: 34 44% 69%;
    --secondary-foreground: 130 27% 15%;

    --muted: 39 25% 88%;
    --muted-foreground: 0 0% 35%;

    /* Light blue accent - hover states */
    --accent: 200 80% 85%;
    --accent-foreground: 210 90% 25%;

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

    /* Status colors */
    --success: 142 70% 40%;
    --success-foreground: 0 0% 100%;
    --warning: 67 80% 59%;
    --warning-foreground: 140 25% 8%;
    --error: 0 70% 45%;
    --error-foreground: 0 0% 100%;

    /* Granite Grey for borders */
    --border: 0 0% 75%;
    --input: 0 0% 80%;
    --ring: 210 90% 45%;

    --radius: 0.5rem;

    /* Custom gradients */
    --gradient-hero: linear-gradient(135deg, hsl(40 20% 96%) 0%, hsl(39 25% 90%) 100%);
    --gradient-card: linear-gradient(180deg, hsl(40 25% 98%) 0%, hsl(40 20% 94%) 100%);
    --gradient-primary: linear-gradient(135deg, hsl(210 90% 45%) 0%, hsl(210 90% 35%) 100%);

    /* Shadows with earthy tones */
    --shadow-sm: 0 1px 2px 0 hsl(210 90% 35% / 0.08);
    --shadow-md: 0 4px 6px -1px hsl(210 90% 35% / 0.1), 0 2px 4px -2px hsl(210 90% 35% / 0.08);
    --shadow-lg: 0 10px 15px -3px hsl(210 90% 35% / 0.12), 0 4px 6px -4px hsl(210 90% 35% / 0.08);
    --shadow-glow: 0 0 20px hsl(210 90% 45% / 0.2);

    --sidebar-background: 40 20% 94%;
    --sidebar-foreground: 210 90% 30%;
    --sidebar-primary: 210 90% 45%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 34 44% 69%;
    --sidebar-accent-foreground: 210 90% 30%;
    --sidebar-border: 0 0% 75%;
    --sidebar-ring: 210 90% 45%;
  }

  /* Dark mode variant - Deep Forest Night */
  .dark {
    --background: 140 25% 8%;
    --foreground: 40 20% 92%;

    --card: 140 22% 12%;
    --card-foreground: 40 20% 92%;

    --popover: 140 22% 14%;
    --popover-foreground: 40 20% 92%;

    /* Lighter Blue for dark mode */
    --primary: 210 90% 55%;
    --primary-foreground: 0 0% 100%;

    /* Muted Khaki for dark mode */
    --secondary: 34 30% 35%;
    --secondary-foreground: 40 20% 92%;

    --muted: 140 20% 18%;
    --muted-foreground: 40 15% 60%;

    /* Light blue - brighter in dark mode */
    --accent: 200 70% 35%;
    --accent-foreground: 200 80% 90%;

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

    --success: 142 70% 45%;
    --success-foreground: 0 0% 100%;
    --warning: 67 85% 65%;
    --warning-foreground: 140 25% 8%;
    --error: 0 65% 50%;
    --error-foreground: 0 0% 100%;

    /* Granite Grey - darker */
    --border: 140 15% 22%;
    --input: 140 15% 20%;
    --ring: 210 90% 55%;

    --gradient-hero: linear-gradient(135deg, hsl(140 25% 8%) 0%, hsl(140 22% 12%) 100%);
    --gradient-card: linear-gradient(180deg, hsl(140 22% 14%) 0%, hsl(140 22% 10%) 100%);
    --gradient-primary: linear-gradient(135deg, hsl(210 90% 55%) 0%, hsl(210 90% 45%) 100%);

    --shadow-sm: 0 1px 2px 0 hsl(140 25% 5% / 0.4);
    --shadow-md: 0 4px 6px -1px hsl(140 25% 5% / 0.4), 0 2px 4px -2px hsl(140 25% 5% / 0.35);
    --shadow-lg: 0 10px 15px -3px hsl(140 25% 5% / 0.5), 0 4px 6px -4px hsl(140 25% 5% / 0.4);
    --shadow-glow: 0 0 20px hsl(210 90% 55% / 0.2);

    --sidebar-background: 140 22% 10%;
    --sidebar-foreground: 40 20% 90%;
    --sidebar-primary: 210 90% 55%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 34 30% 30%;
    --sidebar-accent-foreground: 40 20% 90%;
    --sidebar-border: 140 15% 20%;
    --sidebar-ring: 210 90% 55%;
  }
}

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

  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-background text-foreground antialiased;
    font-family: 'Figtree', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    @apply font-bold tracking-tight;
  }

  code, pre {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  }
}

@layer components {
  .card-hover {
    @apply transition-all duration-300 hover:shadow-lg hover:border-primary/40;
  }

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

  .glow-effect {
    box-shadow: var(--shadow-glow);
  }

  /* National Park badge style */
  .park-badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold;
    @apply bg-primary text-primary-foreground;
    @apply border-2 border-primary/20;
  }
}

@layer utilities {
  .animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
  }

  .animate-slide-up {
    animation: slideUp 0.5s ease-out forwards;
  }

  .animate-pulse-slow {
    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes slideUp {
    from { 
      opacity: 0;
      transform: translateY(10px);
    }
    to { 
      opacity: 1;
      transform: translateY(0);
    }
  }
}