/* ========================================
   CHEF D'ŒUVRE STUDIO — Gray Rebrand Theme
   ======================================== */

:root {
    --black: #0b0d11;
    --dark: #11141a;
    --dark-2: #171b23;
    --dark-3: #1d232d;
    --dark-4: #252d39;
    --gray-900: #2d3542;
    --gray-800: #3c4656;
    --gray-700: #535f71;
    --gray-600: #6f7b8b;
    --gray-500: #8f9aa9;
    --gray-400: #b0b9c5;
    --gray-300: #cbd2db;
    --gray-200: #dde2e8;
    --gray-100: #eef1f5;
    --white: #f2f4f7;
    --gold: #b8c0cb;
    --gold-light: #d7dde6;
    --gold-dark: #8f98a6;
    --steel-rgb: 184, 192, 203;

    /* Admin palette compatibility */
    --bg: #0b0d11;
    --card: #151a22;
    --card2: #1c232e;
    --g400: #a2acba;
    --g500: #8591a2;
    --g600: #677486;
    --g700: #3a4454;
    --g800: #252d39;
}

html, body {
    background: radial-gradient(1200px 700px at 15% -10%, rgba(var(--steel-rgb), 0.13), transparent 55%),
                radial-gradient(800px 500px at 85% 10%, rgba(var(--steel-rgb), 0.10), transparent 60%),
                var(--black);
}

::selection {
    background: var(--gold);
    color: #0b0d11;
}

::-webkit-scrollbar-thumb {
    background: var(--gold);
}

/* Global visual mood */
.navbar.scrolled,
.topbar,
.tabs {
    background: rgba(13, 16, 22, 0.92) !important;
    backdrop-filter: blur(18px);
}

.nav-logo span,
.logo .g,
.section-label,
.card-title i,
.service-price,
.service-duration i,
.today-rdv .time,
.req-service,
.client-info .meta a,
.footer-links a:hover,
.footer-socials a:hover {
    color: var(--gold) !important;
}

.nav-cta,
.btn-outline,
.btn-add,
.calendar-nav,
.week-day.today {
    border-color: rgba(var(--steel-rgb), 0.55) !important;
}

.nav-cta,
.btn-outline,
.btn-add,
.calendar-nav,
.nav-login:hover,
.search-wrap input:focus,
.modal input:focus,
.modal select:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    box-shadow: 0 0 0 3px rgba(var(--steel-rgb), 0.18) !important;
}

.hero-bg {
    background: radial-gradient(ellipse at 30% 50%, rgba(var(--steel-rgb), 0.12) 0%, transparent 70%),
                radial-gradient(ellipse at 70% 50%, rgba(var(--steel-rgb), 0.08) 0%, transparent 70%) !important;
}

.service-card,
.contact-card,
.schedule-day,
.booking-summary,
.calendar-container,
.account-header,
.booking-card,
.client-card,
.req-card,
.day-panel,
.card,
.stat {
    border-color: rgba(var(--steel-rgb), 0.18) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

.service-card:hover,
.contact-card:hover,
.schedule-day:hover,
.booking-card:hover {
    border-color: rgba(var(--steel-rgb), 0.35) !important;
}

.btn-gold,
.hero-cta,
.modal-submit,
.booking-step.active .step-number,
.service-select-card.selected::after {
    background: linear-gradient(135deg, #c8ced8 0%, #a5afbc 100%) !important;
    color: #0c1016 !important;
}

.booking-step,
.booking-summary,
.service-select-card,
.calendar-container,
.account-section-title,
.account-header,
.booking-card {
    border-color: rgba(var(--steel-rgb), 0.2) !important;
}

.booking-step.active,
.service-select-card.selected,
.week-day.today,
.cal-day.active {
    background: rgba(var(--steel-rgb), 0.12) !important;
}

.account-avatar {
    background: linear-gradient(135deg, #c7ced8, #8f99a8) !important;
    color: #10141c !important;
}

.legal-page h2,
.legal-page a,
.legal-page th {
    color: var(--gold) !important;
}

.legal-page th,
.legal-page td {
    border-color: rgba(var(--steel-rgb), 0.22) !important;
}

.legal-page th {
    background: rgba(var(--steel-rgb), 0.1) !important;
}

.cal-day.active,
.week-day.today,
.nav-links a.active,
.nav-links a:hover,
.btn-outline:hover,
.nav-cta:hover {
    color: #e8edf3 !important;
}

/* Logo images */
.nav-logo-img {
    height: 42px;
    width: auto;
    filter: brightness(1.3) contrast(1.1);
    transition: filter 0.3s ease;
}
.nav-logo:hover .nav-logo-img {
    filter: brightness(1.5) contrast(1.15);
}
.footer-logo-img {
    height: 50px;
    width: auto;
    filter: brightness(1.2);
    margin: 0 auto;
}
.footer-logo {
    display: flex;
    justify-content: center;
}

/* Loader logo */
#loader {
    background: var(--black) !important;
}
.loader-text {
    font-size: clamp(1rem, 3vw, 1.6rem) !important;
    color: var(--gold) !important;
    letter-spacing: 5px !important;
}

@media (max-width: 768px) {
    .nav-logo-img { height: 34px; }
    .footer-logo-img { height: 40px; }
}