/* ============================================================
   Global — variables, reset, typography, utilities
   ============================================================ */

/* ── Variables ──────────────────────────────────────────────
   Colours and type scale pulled from the Figma file's
   published variables (Forge Pilates UX Design).
   ─────────────────────────────────────────────────────────── */
:root {
    /* Colours */
    --color-dark:        #201211; /* Brand/Dark, Text */
    --color-light:       #F6F2EC; /* Brand/Cream, Neutral White */
    --color-accent:      #884F3C; /* Brand/Terracotta */
    --color-bg:          #F6F2EC; /* Brand/Cream */

    --color-blush:       #C0A899; /* Brand/Blush */
    --color-greige-light:#EBE8E2; /* Brand/Greige Light */
    --color-greige-mid:  #E6E1D7; /* Brand/Greige Mid */
    --color-warm-divider:#DED9D1; /* Brand/Warm Divider */
    --color-card-bg:     #DAD4C9; /* Brand/Card BG */
    --color-card-dark:   #CDBDB4; /* Brand/Card Dark */
    --color-clay-brown:  #A37E64; /* Secondary - Clay Brown */
    --color-rich-brown:  #582613; /* Secondary - Rich Brown */
    --color-espresso:    #3A2D2C; /* Soft Espresso */
    --gray-color-200:    #A37E64; /* Same as --color-clay-brown (Secondary Light Brown) */

    /* Fonts */
    --font-heading: "Playfair Display", serif;
    --font-body:    "DM Sans", sans-serif;

    /* Type scale — Figma text styles, for reference when building section CSS */
    /* Heading/H1: 60px / 66px, regular */
    /* Heading/H2: 48px / 54px, regular */
    /* Heading/H3: 36px / 42px, regular */
    /* Heading/H4: 28px / 34px, regular */
    /* Eyebrow:    18px / 24px, italic */
    /* Body Large: 18px / 28px, regular */
    /* Body:       16px / 26px, regular */
    /* Button:     16px / 20px, semibold, letter-spacing 0.5px */
    /* Label:      14px / 20px, semibold */

    /* Spacing */
    --pad-x:      50px;
    --pad-y:      40px;
    --pad-y-alt:  80px;

    /* Layout */
    --site-max-w: 1204px;
    --site-max-w-alt: 1440px;

    /* Misc */
    --transition: 300ms ease;
    --navbar-h:   62px;
}

@media (max-width: 1366px) {
    :root {
        --pad-y:     30px;
        --pad-y-alt: 60px;
    }
}

@media (max-width: 1024px) {
    :root {
        --pad-x:     40px;
        --pad-y:     24px;
        --pad-y-alt: 48px;
    }
}

@media (max-width: 767px) {
    :root {
        --pad-x: 24px;
    }
}


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

html {
    scroll-behavior: smooth;
    scrollbar-gutter: stable; /* reserves scrollbar space so .has-mobile-nav-open's overflow:hidden doesn't shift the page */
}

body {
    font-family: var(--font-body);
    font-optical-sizing: auto; /* inherited — enables opsz for Playfair Display / DM Sans */
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-dark);
    background: var(--color-bg);
    overflow-x: hidden;
    padding-top: var(--navbar-h); /* offsets the fixed .site-header */
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Utility: apply Playfair Display directly (e.g. in rich-text content). */
.playfair-display {
    font-family: var(--font-heading);
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

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


/* ── Typography ─────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    line-height: 1.1;
}


/* ── Buttons ────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 24px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition);
    border: none;
}

.btn--primary {
    background: var(--color-accent);
    color: var(--color-light);
}

.btn--blush {
    background: var(--color-blush);
    color: var(--color-dark);
}

.btn--outline {
    background: transparent;
    color: var(--color-dark);
    border: 2px solid var(--color-dark);
}

.btn--light {
    background: var(--color-light);
    color: var(--color-dark);
}

.btn--accent-dark {
    background: var(--color-accent);
    color: var(--color-dark);
}

/* ── Hover states ─────────────────────────────────────────────
   Filled buttons darken slightly (works over any background, incl. buttons on
   the dark hero); the outline button fills in on hover. */
.btn--primary:hover,
.btn--blush:hover,
.btn--light:hover,
.btn--accent-dark:hover {
    filter: brightness(0.92);
}

.btn--outline:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-light);
}