/* ======================================================
   White Drives — Design tokens & shared primitives
   Single source of truth for the entire visual system.
   Change a token here → it propagates everywhere.
   ====================================================== */

:root {
    /* ---- Palette (solid) ---- */
    --ink:         #0B1E2B;
    --ink-soft:    #122c3d;
    --ink-deep:    #061521;
    --brand:       #154A65;
    --brass:       #C9A063;
    --brass-soft:  #E5C793;
    --cream:       #F4ECDE;
    --bone:        #FAF5EB;
    --muted:       #8A99A4;
    --muted-ink:   #4a5862;  /* slightly darker muted, for long-form text */

    /* ---- Palette (RGB triplets — for rgba()) ---- */
    --ink-rgb:     11, 30, 43;
    --brand-rgb:   21, 74, 101;
    --brass-rgb:   201, 160, 99;
    --cream-rgb:   244, 236, 222;

    /* ---- Semantic colors ---- */
    --danger:        #d64550;
    --danger-soft:   #b4232f;
    --danger-light:  #ff8a8a;   /* on-dark error text */
    --danger-bg:     rgba(214, 69, 80, .08);
    --danger-border: rgba(214, 69, 80, .25);
    --success:       #0f6d4b;
    --success-bg:    rgba(16, 150, 100, .08);
    --success-border:rgba(16, 150, 100, .25);
    --rating:        #FFB800;
    --offer:         #6b3fa0;
    --nearest:       #2b3eab;
    --placeholder:   #b5bec5;   /* input placeholder text */
    --cream-grad-1:  #f0e9dc;   /* decorative cream gradient endpoints */
    --cream-grad-2:  #e9dfcc;

    /* ---- Derived / shared ---- */
    --rule:        rgba(var(--brass-rgb), 0.25);

    /* ---- Typography ---- */
    --serif:       'Playfair Display', 'Times New Roman', serif;
    --sans:        'Cairo', 'Alexandria', sans-serif;

    /* ---- Border radius scale ---- */
    --radius-xs:     8px;
    --radius-sm:     10px;
    --radius-chip:   12px;   /* small chip / tag */
    --radius-md:     14px;
    --radius-icon:   16px;   /* icon tile */
    --radius-lg:     18px;
    --radius-input:  20px;   /* large input row */
    --radius-xl:     22px;
    --radius-2xl:    24px;
    --radius-3xl:    28px;
    --radius-pill:   999px;
    --radius-circle: 50%;

    /* ---- Shadows ---- */
    --shadow-sm:    0 2px 6px rgba(var(--ink-rgb), .08);
    --shadow-md:    0 8px 20px -5px rgba(var(--ink-rgb), .12);
    --shadow-lg:    0 20px 40px -15px rgba(var(--ink-rgb), .15);
    --shadow-xl:    0 30px 60px -20px rgba(var(--ink-rgb), .22);
    --shadow-card:  0 30px 60px -20px rgba(var(--ink-rgb), .25);
    --shadow-modal: 0 30px 80px -20px rgba(var(--ink-rgb), .5);
    --shadow-brass: 0 16px 40px -8px rgba(var(--brass-rgb), .5);
    --shadow-pop:   0 40px 80px -30px rgba(var(--ink-rgb), .25);

    /* ---- Motion ---- */
    --d-fast:      .25s;
    --d-base:      .3s;
    --d-slow:      .4s;
    --d-slower:    .9s;
    --ease:        ease;
    --ease-out:    cubic-bezier(.2, .7, .2, 1);
}

.wd-page,
.wd-page *,
.wd-header,
.wd-header *,
.wd-footer,
.wd-footer *,
.wd-log-footer,
.wd-log-footer *,
.wd-auth,
.wd-auth *,
.wd-modal,
.wd-modal * {
    box-sizing: border-box;
}

.wd-page,
.wd-header,
.wd-footer,
.wd-log-footer,
.wd-auth,
.wd-modal {
    font-family: var(--sans);
}

.wd-page {
    color: var(--ink);
    background: var(--bone);
    overflow-x: hidden;
}

.wd-page::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .04;
    z-index: 1;
    background-image: radial-gradient(rgba(var(--ink-rgb), .8) 1px, transparent 1px);
    background-size: 3px 3px;
}

/* ------- Shared button ------- */
.wd-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 28px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-family: var(--sans);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all var(--d-slow) var(--ease);
    text-decoration: none;
    background: transparent;
    color: inherit;
}

.wd-btn--solid {
    background: var(--brass);
    color: var(--ink-deep);
}

.wd-btn--solid:hover {
    background: var(--cream);
    color: var(--ink-deep);
    transform: translateY(-2px);
}

.wd-btn--ghost {
    border-color: rgba(var(--cream-rgb), .3);
    color: var(--cream);
}

.wd-btn--ghost:hover {
    border-color: var(--brass);
    color: var(--brass-soft);
    transform: translateY(-2px);
}

.wd-btn svg {
    width: 18px;
    height: 18px;
    transition: transform var(--d-slow) var(--ease);
}

.wd-btn:hover svg {
    transform: translateX(-4px);
}

/* ------- Shared section header ------- */
.wd-section {
    position: relative;
    padding: 120px 40px;
    max-width: 1360px;
    margin: 0 auto;
}

.wd-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    letter-spacing: .35em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 20px;
}

.wd-eyebrow::before {
    content: '';
    width: 30px;
    height: 1px;
    background: var(--brass);
}

.wd-section__head {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: end;
    margin-bottom: 64px;
}

.wd-section__title {
    font-family: var(--sans);
    font-weight: 800;
    font-size: clamp(36px, 5vw, 72px);
    line-height: 1.05;
    margin: 0;
    color: var(--ink);
    letter-spacing: -.01em;
}

.wd-section__title .accent {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    color: var(--brass);
}

.wd-section__desc {
    font-size: 16px;
    line-height: 1.8;
    color: var(--muted-ink);
    margin: 0;
    max-width: 520px;
}

/* ------- Shared rise entrance animation ------- */
@keyframes wdRise {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ------- Shared responsive for section heads ------- */
@media (max-width: 992px) {
    .wd-section__head {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

@media (max-width: 640px) {
    .wd-section {
        padding: 80px 20px;
    }
}