/* ===========================
   CSS CUSTOM PROPERTIES
   =========================== */
:root {
    /* PRIMARY THEME — Cinematic & Moody */
    --bg-primary: #121212;
    /* Deep Charcoal / Obsidian — main background */
    --bg-secondary: #1E2623;
    /* Muted Forest Green / Slate — cards, sections */
    --text-primary: #F4F4F4;
    /* Crisp Off-White — headings, body text */
    --accent: #D4A373;
    /* Muted Gold / Amber — buttons, links, highlights */
    --text-subtle: #8E9699;
    /* Soft Gray — captions, meta, placeholder text */

    /* Contextual vars */
    --hero-overlay: rgba(18, 18, 18, 0.55);
    --lightbox-bg: rgba(18, 18, 18, 0.95);
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4);

    /* Typography */
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Inter', sans-serif;

    /* Structural */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --transition-smooth: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

:root[data-theme="light"] {
    /* SECONDARY THEME — Light & Airy */
    --bg-primary: #FAFAFA;
    /* Clean White / Birch — main background */
    --bg-secondary: #EFEFEF;
    /* Very Pale Gray — cards, sections */
    --text-primary: #2C3539;
    /* Dark Slate — headings, body text */
    --accent: #8A9A5B;
    /* Moss / Sage Green — buttons, links, highlights */
    --text-subtle: #C3A27A;
    /* Soft Taupe — captions, meta, placeholder text */

    /* Contextual vars */
    --hero-overlay: rgba(0, 0, 0, 0.4);
    --lightbox-bg: rgba(250, 250, 250, 0.95);
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.08);
}