/* ============================================================
   AUREA Design & Estate — Base Layer
   Design tokens, resets, typography, layout primitives, utilities
   Split from style-v10.css — 2026-03-18
   ============================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-x: hidden; }
body { overflow-x: hidden; position: relative; }

:root {
    /* Colors */
    --gold: #B8A88A;
    --gold-light: #D4C4A0;
    --gold-dark: #8B7744;
    --gold-text: #7A6B3A;
    --gold-ink: #5c4a30;
    --gold-ink-bg: rgba(92, 74, 48, 0.06);
    --gold-on-dark: #D4C4A0;
    --gold-bg: rgba(184, 168, 138, 0.08);
    --dark: #2C2A26;
    --charcoal: #4A4640;
    --warm-gray: #9A9690;
    --stone: #D4CFC6;
    --offwhite: #FAFAF8;
    --white: #FFFFFF;
    --night: #1A1916;

    /* Semantic */
    --color-success: #4A7A3E;
    --color-success-bg: rgba(74, 122, 62, 0.08);
    --color-warning: #B8862E;
    --color-warning-bg: rgba(184, 134, 46, 0.08);
    --color-sold: #8A857D;
    --color-sold-bg: rgba(138, 133, 125, 0.06);

    /* Typography */
    --serif: 'Cormorant Garamond', Georgia, serif;
    --sans: 'Inter', -apple-system, sans-serif;
    --display: var(--serif);
    --body: var(--sans);
    --text-label: 0.78rem;
    --text-body: 0.95rem;
    --text-caption: 0.8rem;

    /* Spacing (4px base) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    /* Aliases — pin to existing fallback values used at call sites so the
       computed style is identical with or without these definitions. */
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --gutter: 2rem;

    /* Radius */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-1: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-2: 0 4px 16px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
    --shadow-3: 0 12px 40px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.05);

    /* Transitions */
    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-normal: 300ms;
    --duration-slow: 500ms;
    --transition-all: all 300ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Compatibility aliases */
    --off-white: var(--offwhite);
    --cream: #EDE8DF;
    --olive: #6B7F5E;
    --aegean: #2E5D6C;
    --max-width: 1400px;
    --nav-height: 80px;
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--sans);
    background: var(--white);
    color: var(--dark);
    font-weight: 300;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* --- Containers --- */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 2rem;
}
.container--narrow { max-width: 800px; }
.container-narrow { max-width: 950px; margin: 0 auto; }

/* --- Typography --- */
.t-label {
    font-size: 0.78rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--warm-gray);
    margin-bottom: 1.5rem;
}

.t-heading {
    font-family: var(--serif);
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 300;
    line-height: 1.15;
    margin-bottom: 1.5rem;
}

.t-subheading {
    font-family: var(--serif);
    font-size: clamp(1.1rem, 2.5vw, 2.2rem);
    font-weight: 300;
    line-height: 1.25;
    margin-bottom: 1rem;
}

.t-body {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--warm-gray);
    max-width: 580px;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.t-small {
    font-size: 0.8rem;
    line-height: 1.7;
    color: var(--warm-gray);
}

/* --- Section Spacing --- */
.std { padding: 5rem 3rem; }
.std-lg { padding: 6rem 3rem; }

/* --- Background Helpers --- */
.bg-offwhite { background: var(--off-white); }
.bg-cream { background: var(--cream); }
.bg-dark { background: var(--dark); color: var(--white); }
.bg-night { background: var(--night); color: var(--white); }

.section--dark { background: var(--dark); color: var(--white); }
.section--flush { padding: 0; }
.section--compact { padding: 3rem 0; }
.section-intro { text-align: center; max-width: var(--max-width); margin: 0 auto; }

/* --- Layout Primitives --- */
.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: center;
    max-width: var(--max-width);
    margin: 0 auto;
}

.two-col.reverse > :first-child { order: 2; }
.two-col.reverse > :last-child { order: 1; }

/* --- Utility Classes --- */
.text-gold { color: var(--gold-text); }
.text-white { color: var(--white); }
.text-stone { color: var(--stone); }
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.is-featured { border-color: var(--gold) !important; }
.mt-sm { margin-top: 0.5rem; }
.mt-md { margin-top: 1rem; }
.mt-lg { margin-top: 2rem; }
.mt-xl { margin-top: 3rem; }
.mb-sm { margin-bottom: 0.5rem; }
.mb-md { margin-bottom: 1rem; }
.mb-lg { margin-bottom: 2rem; }
.mb-xl { margin-bottom: 3rem; }

/* --- Icons --- */
.icon {
    width: 20px;
    height: 20px;
    stroke-width: 1.75;
}
.icon--xs { width: 14px; height: 14px; }
.icon--sm { width: 16px; height: 16px; }
.icon--room { width: 18px; height: 18px; }
.icon--chip,
.icon--inline { width: 16px; height: 16px; }
.icon--gold,
.icon--gold-light { color: var(--gold); }

/* Screen reader only */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ── Skip Navigation ─────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--dark);
  color: var(--white);
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-sm, 8px);
  font-family: var(--sans);
  font-size: 0.9rem;
  z-index: 9999;
  transition: top 0.2s ease;
  text-decoration: none;
}

.skip-link:focus {
  top: 1rem;
}

/* --- Animations --- */
.fade-in {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===========================================
   DARK THEME — TOKEN-LEVEL OVERRIDES
   (Custom property / color reassignments only;
    component-level dark overrides live in components.css)
   =========================================== */

/* Typography color tokens on dark backgrounds */
.bg-dark .t-label,
.bg-night .t-label,
.section--dark .t-label { color: var(--gold); }

.bg-dark .t-body,
.bg-night .t-body,
.section--dark .t-body { color: var(--stone); }

.section--dark .t-heading,
.section--dark .t-subheading,
.section--dark h2, .section--dark h3, .section--dark h4,
.bg-dark h2, .bg-dark h3, .bg-dark h4,
.bg-night h2, .bg-night h3, .bg-night h4 {
    color: var(--white);
}

.section--dark p,
.section--dark li,
.section--dark .meta-list__value { color: var(--stone); }

.section--dark a,
.bg-dark a,
.bg-night a { color: inherit; }

.section--dark .text-gold,
.bg-dark .text-gold,
.bg-night .text-gold { color: var(--gold-light); }

/* ===========================================
   LIGHT SECTION OVERRIDES (token-level)
   .bg-offwhite / .bg-cream
   =========================================== */

.bg-offwhite .t-heading,
.bg-cream .t-heading,
.bg-offwhite h2, .bg-offwhite h3,
.bg-cream h2, .bg-cream h3 {
    color: var(--dark) !important;
}

.bg-offwhite .t-body, .bg-cream .t-body,
.bg-offwhite p, .bg-cream p,
.bg-offwhite .meta-list__value, .bg-cream .meta-list__value {
    color: var(--charcoal);
}

.bg-offwhite .t-label, .bg-cream .t-label,
.bg-offwhite .meta-list__label, .bg-cream .meta-list__label {
    color: var(--warm-gray);
}

/* --- Prefers Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    .fade-in {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* --- Base Responsive (768px) --- */
@media (max-width: 768px) {
    .container { padding: 0 1.5rem; }
    .std { padding: 3.5rem 1.5rem; }
    .std-lg { padding: 4rem 1.5rem; }
    .t-label { margin-bottom: 1rem; }
    .t-heading { margin-bottom: 1rem; }
    .t-body { line-height: 1.75; }
    .two-col { grid-template-columns: 1fr; gap: 3rem; }
    .two-col.reverse > :first-child { order: 0; }
    .two-col.reverse > :last-child { order: 0; }
}

/* --- Print Base --- */
@media print {
    .fade-in { opacity: 1 !important; transform: none !important; }
}