/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Custom Variables for Modern Brand Colors */
:root {
  --brand-primary: #1E293B;      /* Slate 800 - Professional dark blue */
  --brand-secondary: #F43F5E;    /* Rose 500 - Vibrant coral/pink */
  --brand-accent: #0EA5E9;       /* Sky 500 - Modern blue */
  --brand-success: #10B981;      /* Emerald 500 */
  --brand-bg: #F8FAFC;           /* Slate 50 */
  --brand-text: #0F172A;         /* Slate 900 */
  --brand-text-muted: #64748B;   /* Slate 500 */
}

html {
  scroll-behavior: smooth;
}

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.btn-primary {
  background: linear-gradient(135deg, var(--brand-secondary) 0%, #FB7185 100%);
  color: white;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

.btn-secondary {
  border: 2px solid var(--brand-primary);
  color: var(--brand-primary);
  background: white;
  transition: all 0.3s ease;
}

.btn-secondary:hover {
  background: var(--brand-primary);
  color: white;
}