/* === Theme: Chrome Mono ===
 * Barbershop premium fara nicio culoare: negru, alb si crom periat.
 * Extinde structura din dark-lux; culorile, fonturile si formele vin din paleta din catalog
 * (semanate in tenant_config), asa ca fisierul asta atinge doar tokenii derivati si semnatura.
 *
 * SEMNATURA, si e singura: luciul de metal periat pe titlul din hero. Un gradient metalic nu e
 * o trecere lina — ochiul citeste metalul dupa BENZILE de lumina, deci opririle sunt neuniforme,
 * cu o banda intunecata pe la jumatate si doua reflexii clare. Tot restul temei sta linistit in
 * jurul lui: chenare de un pixel, colturi drepte, zero glow colorat.
 *
 * Cromul e construit din --text-primary si --text-muted, nu din hexuri fixe, ca sa se intoarca
 * singur cand paleta trece pe modul luminos: acolo devine otel inchis pe alb, nu argintiu invizibil.
 */

:root {
    /* Fara rosu nicaieri: tot ce era accent colorat devine metal. */
    --gradient-dark: linear-gradient(165deg, var(--bg-dark) 0%, var(--bg-secondary) 55%, var(--bg-card) 100%);
    --gradient-primary: linear-gradient(135deg, var(--accent-red) 0%, var(--accent-red-hover) 100%);
    --accent-red-light: color-mix(in srgb, var(--accent-red) 10%, transparent);
    /* Umbra accentului e alb-rece, nu colorata — altfel „scapa" o tenta in tema monocroma. */
    --shadow-red: 0 8px 24px -10px color-mix(in srgb, var(--accent-red) 30%, transparent);

    --chrome: linear-gradient(180deg,
        var(--text-primary) 0%,
        color-mix(in srgb, var(--text-muted) 55%, var(--text-primary)) 20%,
        var(--text-muted) 44%,
        color-mix(in srgb, var(--text-primary) 92%, var(--text-muted)) 56%,
        var(--text-primary) 72%,
        color-mix(in srgb, var(--text-muted) 62%, var(--text-primary)) 100%);

    --hairline: color-mix(in srgb, var(--text-primary) 28%, transparent);
}

/* Fundalul: gloturile rosii din dark-lux ies. In locul lor, cele doua texturi din afis —
   grila de puncte intr-un colt, hasura diagonala in celalalt. Amandoua abia vizibile: sunt
   textura de hartie, nu decor. */
body {
    background-image:
        radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--text-primary) 12%, transparent) 1px, transparent 0),
        repeating-linear-gradient(135deg, color-mix(in srgb, var(--text-primary) 6%, transparent) 0 1px, transparent 1px 9px);
    background-size: 22px 22px, auto;
    background-position: left 2rem top 4rem, right top;
    background-repeat: repeat, no-repeat;
    background-attachment: scroll, scroll;
}
.hero { position: relative; overflow: hidden; }
/* Hasura sta doar in coltul din dreapta-sus al hero-ului, ca in afis — nu pe toata pagina. */
.hero::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: min(38%, 340px); height: min(30%, 260px);
    background: repeating-linear-gradient(135deg,
        color-mix(in srgb, var(--text-primary) 9%, transparent) 0 2px,
        transparent 2px 11px);
    pointer-events: none;
    z-index: 0;
}
.hero-content, .hero-image { position: relative; z-index: 1; }

/* --- SEMNATURA: metal periat pe titlul din hero. Un singur loc. --- */
.hero-content h1 {
    background: var(--chrome);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-transform: uppercase;
    letter-spacing: 0.012em;
    line-height: 0.98;
    font-weight: 600;
}
/* Cuvantul evidentiat nu primeste alta culoare — ar rupe monocromia. Primeste contur,
   ca literele conturate din afis. */
.hero-content h1 .highlight {
    background: none;
    -webkit-text-fill-color: transparent;
    color: transparent;
    -webkit-text-stroke: 1px color-mix(in srgb, var(--text-primary) 70%, transparent);
}
@supports not ((-webkit-text-stroke: 1px red)) {
    .hero-content h1 .highlight { -webkit-text-fill-color: var(--text-muted); color: var(--text-muted); }
}

/* Titlurile de sectiune raman condensate si majuscule, dar SOLIDE — cromul ramane al hero-ului.
   Daca ar luci toate, n-ar mai luci niciunul. */
.section-header h2,
.cta-content h2 {
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
    -webkit-text-fill-color: var(--text-primary);
    background: none;
    color: var(--text-primary);
}
.section-header h2::after {
    width: 44px;
    height: 1px;
    border-radius: 0;
    background: var(--accent-red);
}

/* --- Chenare fir de par. Cardurile din afis sunt dreptunghiuri cu contur de un pixel,
       fara umbra si fara rotunjire. --- */
/* Chenarul mostenit (--border-color) e prea aproape de fundalul cardului: ramele dispareau.
   In afis ramele SE CITESC — ele sunt cele care dau ordinea paginii, in lipsa oricarei culori.
   Deci firul se desprinde din --text-primary, nu din culoarea de chenar. */
.service-card,
.testimonial-card,
.feature-item,
.contact-details,
.appointment-modal-content,
.modal-content {
    border: 1px solid color-mix(in srgb, var(--text-primary) 20%, transparent);
    border-radius: 0;
    box-shadow: none;
}
.service-card:hover,
.testimonial-card:hover,
.feature-item:hover {
    border-color: color-mix(in srgb, var(--text-primary) 45%, transparent);
    box-shadow: none;
    transform: translateY(-2px);
}

/* Iconurile: cerc cu fir subtire, nu pastila plina — exact ca insignele din lista afisului. */
.feature-icon {
    background: none;
    border: 1px solid var(--hairline);
    border-radius: 50%;
    color: var(--accent-red);
    box-shadow: none;
}

/* Pretul: argintiu plin, ca gravat pe metal. Fara spalare de gradient. */
.price {
    background: none;
    -webkit-text-fill-color: var(--accent-red);
    color: var(--accent-red);
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Butoane: bloc de metal, muchii aproape drepte, scris rarit ca pe o placuta gravata. */
.btn,
.btn-primary,
.btn-outline {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}
.btn-outline {
    border: 1px solid var(--hairline);
    background: transparent;
}
.btn-outline:hover {
    border-color: var(--accent-red);
    background: color-mix(in srgb, var(--accent-red) 8%, transparent);
}

/* Antetul: o linie de crom sub bara fixa, ca muchia unei lame. */
.header {
    border-bottom: 1px solid var(--hairline);
    box-shadow: none;
    backdrop-filter: blur(10px);
}

/* Sloturile de ora si optiunile din programare: aceleasi chenare drepte. */
.time-slot,
.appointment-type-btn,
.wash-type-btn,
.box-btn {
    border-radius: 2px;
    border: 1px solid var(--border-color);
}
.time-slot:hover,
.appointment-type-btn:hover,
.wash-type-btn:hover,
.box-btn:hover {
    border-color: var(--accent-red);
}

/* Subsolul se desparte tot printr-un fir, nu printr-o banda. */
.footer { border-top: 1px solid var(--border-color); }
.footer-bottom { border-top: 1px solid var(--border-color); }

/* Fotografia in alb-negru e jumatate din caracterul afisului. Culoarea revine la hover,
   ca sa nu ascundem produsul real din poza. */
.hero-image img,
.testimonial-card img,
.image-placeholder img {
    filter: grayscale(1) contrast(1.06);
    transition: filter 0.4s ease;
}
.hero-image img:hover,
.testimonial-card img:hover,
.image-placeholder img:hover {
    filter: grayscale(0) contrast(1);
}

@media (prefers-reduced-motion: reduce) {
    .service-card:hover,
    .testimonial-card:hover,
    .feature-item:hover { transform: none; }
    .hero-image img,
    .testimonial-card img,
    .image-placeholder img { transition: none; }
}