/* === Theme: Barber Noir ===
 * Old-school gentleman's barbershop — warm charcoal, brushed brass, cream.
 * Extends the dark-lux component structure; colors/fonts/shape come from the catalog palette
 * (seeded into tenant_config), so this file only tunes the DERIVED tokens branding.php doesn't emit
 * (gradients, shadows) and adds the theme's signature: a brushed-brass hairline + serif headings.
 */
@import url('../dark-lux/style.css');

:root {
    --gradient-dark: linear-gradient(150deg, #14110f 0%, #1f1b18 60%, #181412 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) 12%, transparent);
    --shadow-red: 0 6px 26px -6px color-mix(in srgb, var(--accent-red) 32%, transparent);
}

/* Warm the ambient hero glow toward brass rather than red-hot. */
body {
    background-image:
        radial-gradient(circle at 18% 30%, color-mix(in srgb, var(--accent-red) 5%, transparent) 0%, transparent 55%),
        radial-gradient(circle at 85% 75%, color-mix(in srgb, var(--accent-red) 4%, transparent) 0%, transparent 55%);
}

/* Signature: a thin brushed-brass rule under the fixed header + above the hero — like a barber's strop. */
.header {
    border-bottom: 1px solid color-mix(in srgb, var(--accent-red) 35%, transparent);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--accent-red) 18%, transparent), var(--shadow-md);
}

/* Serif headings read as classic signage; let them breathe. */
.hero-content h1 {
    -webkit-text-fill-color: var(--text-primary);
    background: none;
    letter-spacing: 0.005em;
}
.hero-content h1 .highlight {
    -webkit-text-fill-color: transparent;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    font-style: italic;
}

/* Service price in brass, not a gradient wash — feels engraved. */
.price {
    -webkit-text-fill-color: var(--accent-red);
    background: none;
}

/* Section underline becomes a centered brass bar with a small diamond — barber-shop signwriting. */
.section-header h2::after {
    width: 72px;
    height: 2px;
    background: var(--accent-red);
}