/* Anel's Hair Salon - Custom Styles */

:root {
    --teal-50: #f0fdfa;
    --teal-100: #ccfbf1;
    --teal-500: #14b8a6;
    --teal-600: #0d9488;
    --teal-700: #0f766e;
    --teal-900: #134e4a;
    --teal-950: #042f2e;
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-500: #64748b;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--slate-800);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Smooth scroll padding for fixed nav */
section[id] {
    scroll-margin-top: 80px;
}

/* Selection color */
::selection {
    background: rgba(13, 148, 136, 0.2);
    color: var(--slate-900);
}

/* Focus styles */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--teal-500);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Image optimization */
img {
    max-width: 100%;
    height: auto;
}

/* Button focus states */
button:focus,
a:focus {
    outline-offset: 2px;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--slate-100);
}

::-webkit-scrollbar-thumb {
    background: var(--teal-600);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--teal-700);
}

/* Subtle animation for page load */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ensure hero content is always visible */
#hero h1,
#hero p,
#hero .inline-block,
#hero .flex,
#hero .grid {
    opacity: 1 !important;
    transform: none !important;
}

/* Print styles */
@media print {
    nav,
    .btn-primary,
    #contact-form {
        display: none;
    }
    
    body {
        color: #000;
        background: #fff;
    }
}