/* ============================================================
   TOKENS — edit these to restyle the entire site
   ============================================================ */
:root {
  /* ── COLORS ──────────────────────────────────────────────── */
  --clr-bg:        #0a0a0a;      /* main background            */
  --clr-surface:   #111111;      /* cards, panels              */
  --clr-border:    #1e1e1e;      /* subtle dividers            */
  --clr-text:      #e8e4dc;      /* primary text               */
  --clr-muted:     #6b6660;      /* secondary / muted text     */
  --clr-accent:    #c9a96e;      /* gold accent                */
  --clr-accent-dim:#8a6f42;      /* dimmer gold                */
  --clr-white:     #ffffff;

  /* ── TYPOGRAPHY ──────────────────────────────────────────── */
  /* CUSTOMIZE: swap font names to change typefaces globally    */
  --font-display:  'Cormorant Garamond', Georgia, serif;
  --font-body:     'DM Sans', system-ui, sans-serif;

  --fs-xs:    0.75rem;    /*  12px */
  --fs-sm:    0.875rem;   /*  14px */
  --fs-base:  1rem;       /*  16px */
  --fs-md:    1.125rem;   /*  18px */
  --fs-lg:    1.375rem;   /*  22px */
  --fs-xl:    1.75rem;    /*  28px */
  --fs-2xl:   2.25rem;    /*  36px */
  --fs-3xl:   3rem;       /*  48px */
  --fs-4xl:   4rem;       /*  64px */
  --fs-5xl:   5.5rem;     /*  88px */
  --fs-6xl:   7.5rem;     /* 120px */

  --lh-tight:  1.1;
  --lh-snug:   1.3;
  --lh-normal: 1.6;
  --lh-loose:  1.8;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;

  /* ── SPACING ─────────────────────────────────────────────── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;
  --space-40:  10rem;

  /* ── LAYOUT ──────────────────────────────────────────────── */
  --container-max: 72rem;
  --container-pad: clamp(1.25rem, 5vw, 3rem);

  /* ── BORDERS & RADII ─────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* ── TRANSITIONS ─────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --ease-inout: cubic-bezier(0.76, 0, 0.24, 1);
  --dur-fast:   180ms;
  --dur-base:   320ms;
  --dur-slow:   600ms;
  --dur-xslow:  900ms;

  /* ── SHADOWS ─────────────────────────────────────────────── */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.4);
  --shadow-md:  0 8px 32px rgba(0,0,0,0.5);
  --shadow-lg:  0 20px 60px rgba(0,0,0,0.6);
  --shadow-glow: 0 0 40px rgba(201,169,110,0.12);
}