@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --radius: 0.625rem;
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
}

/* Brand Colors - Red, Black, Yellow */
:root {
  --color-primary: #dc2626; /* GM Fire red */
  --color-primary-foreground: #ffffff;
  --color-secondary: #fbbf24; /* GM Fire yellow */
  --color-secondary-foreground: #1f2937;
  --color-dark: #111827;
  --color-dark-foreground: #f9fafb;
}

/* Custom utilities for modern design */
.text-balance {
  text-wrap: balance;
}

.text-pretty {
  text-wrap: pretty;
}

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

/* Modern button hover effects */
.btn-hover {
  transition: all 0.2s ease-in-out;
}

.btn-hover:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 25px -5px rgba(220, 38, 38, 0.25);
}

/* Component styles */
.hero-bg {
  background-image: linear-gradient(rgba(17, 24, 39, 0.8), rgba(17, 24, 39, 0.8)), url("/assets/images/modern-fire-suppression-system-with-red-cylinders-.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.card {
  @apply bg-white border border-gray-200 rounded-lg shadow-sm transition-all duration-300;
}

.card:hover {
  @apply shadow-xl border-gray-300;
  transform: translateY(-2px);
}

.card-content {
  @apply p-8;
}

.btn {
  @apply inline-flex items-center justify-center px-6 py-3 rounded-lg font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
}

.btn-primary {
  @apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 25px -5px rgba(220, 38, 38, 0.25);
}

.btn-outline {
  @apply border-2 border-current bg-transparent hover:bg-current transition-all duration-200;
}

.btn-lg {
  @apply px-8 py-4 text-lg;
}

.container {
  @apply max-w-7xl mx-auto;
}

/* Icon styles */
.icon {
  @apply w-6 h-6;
}

.icon-lg {
  @apply w-8 h-8;
}

/* Form styles */
.form-input {
  @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-red-500;
}

.form-textarea {
  @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-red-500 resize-vertical;
}

.form-select {
  @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-red-500;
}

.form-label {
  @apply block text-sm font-medium text-gray-700 mb-2;
}

@layer base {
  * {
    @apply border-gray-200;
  }
  body {
    @apply bg-white text-gray-900;
  }
}

/*# sourceMappingURL=main.css.map */