/* F. A. Dominican Hair Salon — Custom Styles */

/* Base overrides */
:root {
    --emerald-50: #f0fdf4;
    --emerald-100: #dcfce7;
    --emerald-200: #bbf7d0;
    --emerald-500: #10b981;
    --emerald-600: #059669;
    --emerald-700: #047857;
    --emerald-800: #065f46;
    --emerald-900: #064e3b;
    --emerald-950: #022c22;
    --cream-50: #fefdf8;
    --cream-100: #fdf9f0;
}

/* Selection color */
::selection {
    background: rgba(5, 150, 105, 0.2);
    color: #064e3b;
}

/* Focus visible */
:focus-visible {
    outline: 2px solid #059669;
    outline-offset: 2px;
}

/* Smooth transitions for all interactive elements */
a, button {
    -webkit-tap-highlight-color: transparent;
}

/* Prevent jank on mobile */
img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-select: none;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    html { scroll-behavior: auto; }
    .animate-on-scroll {
        opacity: 1;
        transform: none;
    }
}

/* Print styles */
@media print {
    .hero-gradient, nav, .mobile-menu, #menuOverlay { display: none !important; }
    body { background: white !important; color: black !important; }
    a { color: black !important; }
}