/**
 * variables.css — Design Tokens
 * ─────────────────────────────
 * Single source of truth for all colours, fonts, spacing, and layout
 * constraints. Import this file first in index.html so every other
 * stylesheet can reference these tokens.
 *
 * HOW TO THEME:
 *   Change values here and they propagate across the entire site.
 */

:root {
    /* ── Colour Palette ── */
    --gold:        #C9A84C;   /* Primary accent – gold  */
    --gold-light:  #E8CC7A;   /* Hover / lighter gold   */
    --black:       #0A0A0A;   /* Deepest background      */
    --dark:        #111111;   /* Section background      */
    --dark2:       #1A1A1A;   /* Card / elevated surface */
    --cream:       #F7F2E8;   /* Primary text colour     */

    /* ── Typography ── */
    --serif: 'Cormorant Garamond', Georgia, serif;  /* Display / headings */
    --sans:  'Jost', sans-serif;                    /* Body / UI          */

    /* ── Layout ── */
    --max: 1380px;                       /* Max content width          */
    --pad: clamp(24px, 5vw, 80px);      /* Horizontal section padding */
    --sec-pad: clamp(110px, 12vw, 175px); /* Luxury breathable vertical padding */
}