/**
 * Redesign 2026 – Mobilní Kadeřnictví HK
 * Paleta: krémová #F6F1E9 / espresso #1C1714 / zlatá #8A6A3B
 * Typografie: Marcellus (nadpisy) + Jost (text)
 * Načítá se jako poslední a přepisuje Tailwind utility i komponenty ze style.css
 */

:root {
    --rd-cream: #F6F1E9;
    --rd-paper: #FFFDF9;
    --rd-espresso: #1C1714;
    --rd-espresso-2: #2A2320;
    --rd-ink: #2A2320;
    --rd-muted: #6B5F55;
    --rd-gold: #8A6A3B;
    --rd-gold-light: #B08D57;
    --rd-gold-pale: #C9AE85;
    --rd-sand: #E3D3B8;
    --rd-sand-light: #EFE6D8;
    --rd-border: rgba(28, 23, 20, 0.12);
}

/* ===== Typografie ===== */
body {
    font-family: 'Jost', system-ui, sans-serif !important;
    color: var(--rd-ink);
}

.font-heading,
h1, h2, h3, h4 {
    font-family: 'Marcellus', serif !important;
    font-weight: 400 !important;
    letter-spacing: 0.015em;
}

/* ===== Základní plochy ===== */
.bg-gray-50 { background-color: var(--rd-cream) !important; }
.bg-white { background-color: var(--rd-paper) !important; }
.bg-white\/90, .bg-white\/95 { background-color: rgba(255, 253, 249, 0.92) !important; }

.text-gray-900 { color: var(--rd-espresso) !important; }
.text-gray-800 { color: var(--rd-ink) !important; }
.text-gray-700 { color: #4A4038 !important; }
.text-gray-600 { color: var(--rd-muted) !important; }
.text-gray-500 { color: #8A7A6C !important; }

.border-gray-100, .border-gray-200 { border-color: var(--rd-border) !important; }

/* ===== Zaoblení – ostřejší, elegantnější vzhled ===== */
.rounded-3xl, .rounded-2xl { border-radius: 4px !important; }
.rounded-xl { border-radius: 3px !important; }
.rounded-lg { border-radius: 2px !important; }

/* ===== Fialová/růžová → espresso & zlatá ===== */
.text-primary-600, .text-purple-600 { color: var(--rd-gold) !important; }
.text-primary-500, .text-pink-500 { color: var(--rd-gold-light) !important; }
.text-primary-400 { color: var(--rd-gold-pale) !important; }
.text-primary-300 { color: var(--rd-sand) !important; }
.text-primary-700 { color: #6B5230 !important; }

.hover\:text-primary-600:hover, .hover\:text-primary-700:hover { color: #6B5230 !important; }
.hover\:text-primary-400:hover { color: var(--rd-gold-pale) !important; }

.bg-primary-600 { background-color: var(--rd-espresso) !important; }
.hover\:bg-primary-600:hover, .hover\:bg-primary-700:hover { background-color: var(--rd-gold) !important; }
.bg-primary-100, .bg-purple-100 { background-color: var(--rd-sand) !important; }
.bg-primary-50, .bg-purple-50 { background-color: var(--rd-sand-light) !important; }
.bg-purple-300, .bg-pink-300 { background-color: var(--rd-sand) !important; }

.border-primary-100 { border-color: var(--rd-sand) !important; }
.border-purple-400 { border-color: var(--rd-gold-light) !important; }

.focus\:ring-primary-500:focus { --tw-ring-color: rgba(138, 106, 59, 0.45) !important; }
.focus\:border-primary-500:focus { border-color: var(--rd-gold) !important; }

.shadow-primary-200, .shadow-primary-300 { --tw-shadow-color: rgba(28, 23, 20, 0.15) !important; }
.shadow-primary-500\/25 { --tw-shadow-color: rgba(28, 23, 20, 0.15) !important; }

/* ===== Gradienty → tlumené espresso / zlatá ===== */
.from-primary-600, .from-primary-500, .from-primary-400, .from-purple-600 {
    --tw-gradient-from: var(--rd-espresso) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgba(28, 23, 20, 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.to-pink-500, .to-pink-600, .to-pink-400, .to-primary-500 {
    --tw-gradient-to: var(--rd-espresso-2) var(--tw-gradient-to-position) !important;
}
.via-purple-600 {
    --tw-gradient-stops: var(--tw-gradient-from), var(--rd-espresso-2) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}
.hover\:from-purple-600:hover {
    --tw-gradient-from: var(--rd-gold) var(--tw-gradient-from-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.hover\:to-pink-500:hover {
    --tw-gradient-to: var(--rd-gold-light) var(--tw-gradient-to-position) !important;
}

/* Světlé gradientové plochy → krémová */
.from-primary-50, .from-primary-100 {
    --tw-gradient-from: var(--rd-cream) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgba(246, 241, 233, 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.to-pink-50, .to-pink-100, .to-purple-100 {
    --tw-gradient-to: var(--rd-sand-light) var(--tw-gradient-to-position) !important;
}
.via-pink-50, .via-pink-100 {
    --tw-gradient-stops: var(--tw-gradient-from), var(--rd-sand-light) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}

/* ===== Komponenty (přepis style.css) ===== */
.nav-link { color: #4A4038; }
.nav-link:hover, .nav-link.active { color: var(--rd-gold); }
.nav-link::after { background: var(--rd-gold); }

.btn-primary {
    background: var(--rd-espresso);
    border-radius: 2px;
    box-shadow: none;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--rd-cream);
}
.btn-primary:hover {
    background: var(--rd-gold);
    color: #FFF;
    transform: none;
    box-shadow: none;
}

.btn-secondary {
    color: var(--rd-espresso);
    background: transparent;
    border: 1px solid rgba(28, 23, 20, 0.35);
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.82rem;
    font-weight: 500;
}
.btn-secondary:hover {
    background: var(--rd-espresso);
    border-color: var(--rd-espresso);
    color: var(--rd-cream);
}

.gradient-text {
    background: none;
    -webkit-text-fill-color: initial;
    color: var(--rd-gold);
}

.card {
    background: var(--rd-paper);
    border: 1px solid var(--rd-border);
    border-radius: 4px;
    box-shadow: none;
}
.card:hover {
    box-shadow: 0 14px 30px -12px rgba(28, 23, 20, 0.18);
}

.service-card::before { background: var(--rd-gold); height: 3px; }

.service-select-card { border: 2px solid var(--rd-border); background: var(--rd-paper); }
.service-select-card:hover { border-color: var(--rd-gold-pale); background: var(--rd-sand-light); }
.service-select-card.selected {
    border-color: var(--rd-gold) !important;
    border-width: 2px !important;
    background: var(--rd-sand-light) !important;
    box-shadow: 0 0 0 3px rgba(138, 106, 59, 0.18) !important;
    transform: none;
}
.service-select-card.selected::before {
    background: var(--rd-espresso);
    box-shadow: none;
}
.service-select-card.selected h3 { color: var(--rd-gold); }

.hero-gradient { background: var(--rd-cream); }

.blob { opacity: 0.25; }

.form-input { border: 1px solid rgba(28, 23, 20, 0.25); border-radius: 2px; background: var(--rd-paper); }
.form-input:focus { border-color: var(--rd-gold); box-shadow: 0 0 0 3px rgba(138, 106, 59, 0.12); }
.form-label { color: #4A4038; }

.calendar-day { border-radius: 2px; }
.calendar-day:hover:not(.disabled):not(.selected) { background: var(--rd-sand-light); }
.calendar-day.selected { background: var(--rd-espresso); color: var(--rd-cream); }
.calendar-day.today { border: 1px solid var(--rd-gold); }

.time-slot { border: 1px solid rgba(28, 23, 20, 0.2); border-radius: 2px; }
.time-slot:hover:not(.disabled):not(.selected) { border-color: var(--rd-gold); background: var(--rd-sand-light); }
.time-slot.selected { background: var(--rd-espresso); color: var(--rd-cream); border-color: var(--rd-espresso); }

.feature-icon {
    background: var(--rd-sand-light);
    border: 1px solid var(--rd-sand);
    border-radius: 4px;
    color: var(--rd-gold);
}

.price-tag {
    background: none;
    -webkit-text-fill-color: initial;
    color: var(--rd-gold);
    font-family: 'Marcellus', serif;
    font-weight: 400;
}

/* ===== Tmavé plochy (cookie lišta apod.) ===== */
.bg-gray-900 { background-color: var(--rd-espresso) !important; }
.bg-gray-800 { background-color: rgba(246, 241, 233, 0.08) !important; }

/* ===== Header dle mockupu ===== */
header > nav.fixed {
    background: rgba(246, 241, 233, 0.96) !important;
    box-shadow: none !important;
    border-bottom: 1px solid rgba(28, 23, 20, 0.1);
}
header .nav-link {
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.12em;
    font-weight: 400;
    color: #2A2320;
}
/* Lokalizační štítek – z gradientové pilulky na jemný zlatý text */
header nav div.rounded-full.text-white {
    background: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
header nav div.rounded-full.text-white svg { color: var(--rd-gold) !important; }
header nav div.rounded-full.text-white span {
    color: var(--rd-gold) !important;
    font-family: 'Jost', sans-serif !important;
    font-weight: 500 !important;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-size: 11px !important;
}

/* ===== Patička dle mockupu (krémová) ===== */
footer.bg-gray-900 {
    background-color: var(--rd-cream) !important;
    border-top: 1px solid rgba(28, 23, 20, 0.1);
    color: #4A4038;
}
footer.bg-gray-900 .text-gray-300 { color: #4A4038 !important; }
footer.bg-gray-900 .text-gray-400, footer.bg-gray-900 .text-gray-500 { color: var(--rd-muted) !important; }
footer.bg-gray-900 .text-gray-700 { color: rgba(28, 23, 20, 0.3) !important; }
footer.bg-gray-900 .text-primary-400 { color: var(--rd-gold) !important; }
footer.bg-gray-900 a { color: #4A4038; }
footer.bg-gray-900 a:hover { color: var(--rd-gold) !important; }
footer.bg-gray-900 .text-white { color: var(--rd-espresso) !important; }
footer.bg-gray-900 a.text-white { color: var(--rd-cream) !important; }
footer.bg-gray-900 svg.text-white { color: var(--rd-cream) !important; }
footer.bg-gray-900 h3 {
    color: var(--rd-gold) !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    font-weight: 500 !important;
}
footer.bg-gray-900 .bg-gray-800 {
    background: transparent !important;
    border: 1px solid rgba(28, 23, 20, 0.2);
}
footer.bg-gray-900 .bg-gray-800 svg { color: var(--rd-gold); }
footer.bg-gray-900 .border-gray-800 { border-color: rgba(28, 23, 20, 0.14) !important; }
footer.bg-gray-900 a:hover { color: var(--rd-gold) !important; }
footer.bg-gray-900 .bg-clip-text {
    background: none !important;
    -webkit-text-fill-color: initial !important;
    color: var(--rd-espresso) !important;
}

/* ===== Ostatní ===== */
::selection { background: var(--rd-sand); color: var(--rd-espresso); }

::-webkit-scrollbar-track { background: var(--rd-cream); }
::-webkit-scrollbar-thumb { background: var(--rd-gold-pale); }
::-webkit-scrollbar-thumb:hover { background: var(--rd-gold); }

.loader { border-color: var(--rd-sand); border-top-color: var(--rd-gold); }