/* =============================================================================
   Sevart Gallery — base.css
   Design tokens, reset, global typography
   ============================================================================= */


/* ─── Design Tokens ────────────────────────────────────────────────────────── */

:root {
    /* Colours */
    --color-bg:           #FAF7F4;   /* warm off-white page background */
    --color-bg-alt:       #F2EDE7;   /* slightly deeper warm section bg */
    --color-dark:         #1A1917;   /* near-black for text and dark sections */
    --color-gold:         #C4A96B;   /* primary gold accent */
    --color-gold-hover:   #B8993D;   /* gold on hover */
    --color-text:         #1A1917;   /* default body text */
    --color-text-mid:     #6B6860;   /* secondary / paragraph text */
    --color-text-muted:   #8C8880;   /* labels, captions */
    --color-text-faint:   #B0AA9F;   /* placeholder-level text */
    --color-border:       rgba(26, 25, 23, 0.10);
    --color-border-mid:   rgba(26, 25, 23, 0.20);

    /* Typography */
    --font-serif:   'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-sans:    'DM Sans', system-ui, -apple-system, sans-serif;

    /* Type scale */
    --text-xs:    11px;
    --text-sm:    13px;
    --text-base:  15px;
    --text-md:    17px;
    --text-lg:    20px;
    --text-xl:    28px;
    --text-2xl:   36px;
    --text-3xl:   44px;
    --text-4xl:   52px;
    --text-hero:  72px;

    /* Spacing scale */
    --space-1:   4px;
    --space-2:   8px;
    --space-3:   12px;
    --space-4:   16px;
    --space-5:   20px;
    --space-6:   24px;
    --space-8:   32px;
    --space-10:  40px;
    --space-12:  48px;
    --space-16:  64px;
    --space-20:  80px;
    --space-24:  96px;

    /* Layout */
    --max-width:       1320px;
    --page-pad:        40px;
    --nav-height:      72px;
    --section-pad-v:   88px;

    /* Transitions */
    --transition-fast:   0.2s ease;
    --transition-base:   0.3s ease;
    --transition-slow:   0.6s ease;
}


/* ─── Reset ────────────────────────────────────────────────────────────────── */

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

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

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    padding: 0;
    line-height: inherit;
}

button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

ul,
ol {
    list-style: none;
}

input,
textarea,
select {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    color: var(--color-text);
}

/* ─── Scrollbar ─────────────────────────────────────────────────────────────── */

::-webkit-scrollbar          { width: 6px; }
::-webkit-scrollbar-track    { background: var(--color-bg); }
::-webkit-scrollbar-thumb    { background: #D6D1C9; border-radius: 3px; }


/* ─── Global Typography ─────────────────────────────────────────────────────── */

/* Display headings — Playfair Display */
.display-heading {
    font-family: var(--font-serif);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--color-text);
    text-wrap: pretty;
}

/* Eyebrow / label text */
.eyebrow {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 18px;
}

.eyebrow--light {
    color: rgba(250, 247, 244, 0.5);
}

/* Body copy */
.body-copy {
    font-family: var(--font-sans);
    font-size: var(--text-md);
    color: var(--color-text-mid);
    line-height: 1.8;
}

/* ─── Layout Utilities ──────────────────────────────────────────────────────── */

.container {
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--page-pad);
    padding-right: var(--page-pad);
}

.section {
    padding-top: var(--section-pad-v);
    padding-bottom: var(--section-pad-v);
}

/* ─── Global Divider ────────────────────────────────────────────────────────── */

.divider {
    width: 100%;
    height: 1px;
    background: var(--color-border);
}

/* ─── Gold CTA Button ───────────────────────────────────────────────────────── */

.btn-gold {
    display: inline-block;
    background: var(--color-gold);
    color: #FAF7F4;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 13px 32px;
    border: none;
    transition: background var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;
}

.btn-gold:hover {
    background: var(--color-gold-hover);
    color: #FAF7F4;
}

/* ─── Dark Outline Button ───────────────────────────────────────────────────── */

.btn-dark {
    display: inline-block;
    background: transparent;
    color: var(--color-dark);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 13px 32px;
    border: 1px solid var(--color-dark);
    transition: background var(--transition-fast), color var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;
}

.btn-dark:hover {
    background: var(--color-dark);
    color: #FAF7F4;
}

/* ─── 404 Page ──────────────────────────────────────────────────────────────── */

.error-404 {
    padding-top: var(--nav-height);
    min-height: 80vh;
    display: flex;
    align-items: center;
}

.error-404__inner {
    padding-top: 80px;
    padding-bottom: 80px;
    max-width: 600px;
}

.error-404__heading {
    font-size: var(--text-4xl);
    margin: 8px 0 24px;
}

.error-404__body {
    font-family: var(--font-sans);
    font-size: 16px;
    color: var(--color-text-mid);
    line-height: 1.7;
    margin-bottom: 40px;
}

.error-404__actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}


/* ─── Responsive ────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    :root {
        --page-pad:       24px;
        --section-pad-v:  64px;
        --text-hero:      48px;
        --text-4xl:       36px;
        --text-3xl:       30px;
    }
}

@media (max-width: 600px) {
    :root {
        --page-pad:       20px;
        --section-pad-v:  48px;
        --text-hero:      38px;
        --text-4xl:       30px;
        --text-3xl:       26px;
        --text-2xl:       22px;
    }

    /* Prevent button overflow on very small screens */
    .btn-gold,
    .btn-dark {
        white-space: normal;
        text-align: center;
    }

    /* 404 actions stack on mobile */
    .error-404__actions {
        flex-direction: column;
        align-items: flex-start;
    }
}