/* PinkSlip Building Reports - Theme CSS */
/* This file contains the pink theme colors and custom components */

:root {
  /* Pink Theme Colors - PSBR Brand */
  --color-primary: #ff3355;                         /* Bold pink - Main brand color */
  --color-primary-dark: #cc2944;                    /* Darker pink for hover states */
  --color-primary-light: #ff6680;                   /* Lighter pink for accents */
  --color-primary-bg: #fdf2f8;                      /* Pink-50 - Background tint */
  --color-secondary: #1e293b;                       /* Slate-800 */
  --color-accent: #0ea5e9;                          /* Sky-500 */
  --color-dark: #111827;                            /* Gray-900 */
  --color-light: #f9fafb;                           /* Gray-50 */
}

/* Custom Button Styles */
.btn-primary {
  display: inline-block;
  padding: 0.75rem 2rem;
  background-color: var(--color-primary);
  color: white;
  font-weight: 600;
  border-radius: 0.5rem;
  transition: background-color 150ms ease-in-out;
  text-decoration: none;
}

.btn-primary:hover {
  background-color: var(--color-primary-dark);
}

.btn-secondary {
  display: inline-block;
  padding: 0.75rem 2rem;
  background-color: var(--color-secondary);
  color: white;
  font-weight: 600;
  border-radius: 0.5rem;
  transition: background-color 150ms ease-in-out;
  text-decoration: none;
}

.btn-secondary:hover {
  background-color: #374151; /* Gray-700 */
}

/* Hero image overlays */
.service-hero-gradient {
  background: linear-gradient(90deg,
    rgba(17, 24, 39, 0.94) 0%,
    rgba(17, 24, 39, 0.86) 34%,
    rgba(17, 24, 39, 0.48) 66%,
    rgba(17, 24, 39, 0.18) 100%
  );
}

.hero-text-shadow {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3),
               0 4px 8px rgba(0, 0, 0, 0.2),
               0 1px 3px rgba(0, 0, 0, 0.4);
}

.hero-text-shadow-light {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25),
               0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Card Component */
.card {
  background-color: white;
  padding: 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

/* Form Focus States */
.form-input:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255, 51, 85, 0.2);
}

/* Text Colors */
.text-primary {
  color: var(--color-primary);
}

.text-secondary {
  color: var(--color-secondary);
}

.text-dark {
  color: var(--color-dark);
}

/* Background Colors */
.bg-primary {
  background-color: var(--color-primary);
}

.bg-primary-bg {
  background-color: var(--color-primary-bg);
}

.bg-primary\/10 {
  background-color: rgba(255, 51, 85, 0.1);
}

.bg-secondary {
  background-color: var(--color-secondary);
}

.bg-dark {
  background-color: var(--color-dark);
}

.bg-light {
  background-color: var(--color-light);
}

/* Border Colors */
.border-primary {
  border-color: var(--color-primary);
}

/* Hover States */
.hover\:text-primary:hover {
  color: var(--color-primary);
}

.hover\:text-secondary:hover {
  color: var(--color-secondary);
}

/* Focus Ring */
.focus\:ring-primary:focus {
  --tw-ring-color: var(--color-primary);
}

/* Gradient utilities */
.from-primary {
  --tw-gradient-from: var(--color-primary);
}

.to-secondary {
  --tw-gradient-to: var(--color-secondary);
}