/* ─────────────────────────────────────────────────────
   base.css - Reset, variables, typography, layout system
   Color palette: Black / Gold / Cream (luxury salon feel)
   ───────────────────────────────────────────────────── */

html {
    background-color: #0d0b09;
}

/* Reset default browser styles */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Global CSS variables (colors, spacing, fonts, effects) */
:root {
    /* Background layers */
    --bg: #0d0b09;
    --bg2: #15120f;
    --bg3: #1d1916;

    /* Surfaces (cards, containers) */
    --surface: #23201b;
    --surface2: #2c2822;

    /* Accent (gold/rose tones) */
    --rose: #c9a84c;
    --rose-l: #e2c374;
    --rose-d: #9a7a25;
    --rose-pale: rgba(201,168,76,.08);

    --gold: #c9a84c;
    --gold-l: #e6c97e;
    --gold-pale: rgba(201,168,76,.07);

    /* Text colors */
    --text: #f4efe7;
    --text-m: #c7bcab;
    --text-s: #8c7f6d;

    /* Borders and effects */
    --border: rgba(201,168,76,.16);
    --border2: rgba(201,168,76,.28);
    --glow: rgba(201,168,76,.14);
    --shadow: 0 8px 28px rgba(0,0,0,.34);
    --shadow-lg: 0 20px 60px rgba(0,0,0,.50);

    /* Radius, spacing, transitions */
    --r: 10px;
    --r2: 22px;
    --nav-h: 64px;
    --tr: .25s cubic-bezier(.4,0,.2,1);

    /* Typography */
    --font-d: 'Cormorant Garamond', serif;   /* Decorative headings */
    --font-b: 'DM Sans', sans-serif;   /* Body text */
}

/* Smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
}

/* Base body styling */
body {
    background:
        radial-gradient(circle at top, rgba(201,168,76,.05), transparent 20%),
        var(--bg);
    color: var(--text);
    font-family: var(--font-b);
    font-weight: 300;
    font-size: 15px;
    line-height: 1.65;
    overflow-x: hidden;
    min-height: 100vh;
    padding-top: var(--nav-h);
}

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

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

::-webkit-scrollbar-thumb {
    background: var(--rose-d);
    border-radius: 2px;
}

/* Headings */
h1, h2, h3, h4 {
    font-family: var(--font-d);
    font-weight: 300;
    line-height: 1.15;
    color: var(--text);
}

/* Responsive heading sizes */
h1 {
    font-size: clamp(2.6rem, 7vw, 5rem);
}

h2 {
    font-size: clamp(1.7rem, 3.5vw, 2.6rem);
}

/* Paragraph and links */
p {
    color: var(--text-m);
}

a {
    color: inherit;
    text-decoration: none;
}

/* Layout container */
.container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
}

/* SPA page visibility handling */
.page {
    display: none !important;
    min-height: 100vh;
    visibility: hidden;
}

.page.active {
    display: block !important;
    visibility: visible;
}

/* Special layouts for specific pages */
.booking-page.active {
    display: flex !important;
    flex-direction: column;
}

.courses-page.active {
    display: block !important;
}

/* Section header block */
.section-head {
    text-align: center;
    margin-bottom: 52px;
}

/* Small uppercase label above headings */
.section-head .eyebrow {
    font-size: .68rem;
    font-weight: 400;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 12px;
}

/* Section title */
.section-head h2 {
    color: var(--text);
    font-weight: 300;
}

/* Section description */
.section-head p {
    margin-top: 10px;
    max-width: 480px;
    margin-inline: auto;
}

/* Decorative divider line with gradient */
.divider {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    max-width: 200px;
    margin: 16px auto;
}

.divider::before, .divider::after {
    content: '';
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg, transparent, var(--gold));
}

/* Reverse gradient on the right side */
.divider::after {
    background: linear-gradient(270deg, transparent, var(--gold));
}

/* Small gold diamond decoration */
.gold-diamond {
    width: 7px;
    height: 7px;
    background: var(--gold);
    transform: rotate(45deg);
    display: inline-block;
    opacity: .8;
}

/* Utility badges (labels/tags) */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: var(--rose-pale);
    border: 1px solid var(--border);
    color: var(--gold-l);
    font-weight: 400;
}

/* Gold variant of badge */
.badge-gold {
    background: var(--gold-pale);
    border-color: var(--border);
    color: var(--gold-l);
}