/* ============================================
   SELAH ARTISTRY — Design Tokens
   Edit colours, fonts and spacing here first
   ============================================ */

:root {
  /* ── Colours ── */
  --beige:         #E8E4DC;
  --beige-dark:    #D8D3C8;
  --beige-mid:     #DEDAD2;
  --charcoal:      #2C2C2C;
  --charcoal-light:#4A4A4A;
  --warm-white:    #F5F3EF;
  --accent:        #9A8878;
  --accent-dark:   #7A6A5A;

  /* ── Transparency ── */
  --line:          rgba(44, 44, 44, 0.12);
  --line-strong:   rgba(44, 44, 44, 0.25);
  --overlay-dark:  rgba(44, 44, 44, 0.85);

  /* ── Typography ── */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Jost', 'Helvetica Neue', sans-serif;

  --text-xs:   0.60rem;   /* 9.6px  — labels, tags */
  --text-sm:   0.72rem;   /* 11.5px — captions */
  --text-base: 0.88rem;   /* 14px   — body */
  --text-md:   1.00rem;   /* 16px   — UI */
  --text-lg:   1.30rem;   /* 20px   — subheadings */
  --text-xl:   1.60rem;   /* 25px   — card titles */
  --text-2xl:  2.00rem;   /* 32px   */
  --text-3xl:  2.80rem;   /* 45px   — stat numbers */

  /* ── Spacing ── */
  --space-xs:   8px;
  --space-sm:  16px;
  --space-md:  28px;
  --space-lg:  48px;
  --space-xl:  80px;
  --space-2xl:120px;

  /* ── Section padding ── */
  --section-pad: 120px 60px;
  --section-pad-mobile: 80px 24px;

  /* ── Transitions ── */
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:   cubic-bezier(0.2, 0, 0, 1);
  --duration:   0.35s;
  --duration-slow: 0.9s;
}