/* ============================================================
   Emerald 87 — Design Tokens & CSS Variables
   ============================================================ */

:root {
  /* Brand Colours */
  --color-forest:       #2C3E2D;
  --color-forest-deep:  #1a2b1b;
  --color-forest-dark:  #0f1a10;
  --color-gold:         #C9A84C;
  --color-gold-light:   #E2C97E;
  --color-cream:        #F5F0E8;
  --color-cream-warm:   #EDE5D0;
  --color-white:        #FFFFFF;
  --color-charcoal:     #2A2A2A;
  --color-text-muted:   #6B7B6C;

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Jost', 'Helvetica Neue', Arial, sans-serif;

  /* Type Scale */
  --text-xs:   10px;
  --text-sm:   12px;
  --text-base: 14px;
  --text-md:   16px;
  --text-lg:   20px;
  --text-xl:   clamp(28px, 3vw, 40px);
  --text-2xl:  clamp(36px, 4vw, 56px);
  --text-hero: clamp(48px, 7vw, 88px);

  /* Spacing */
  --space-xs:   8px;
  --space-sm:   16px;
  --space-md:   24px;
  --space-lg:   40px;
  --space-xl:   60px;
  --space-2xl:  100px;

  /* Layout */
  --max-width:       1300px;
  --section-padding: var(--space-2xl) var(--space-xl);

  /* Borders */
  --border-gold:        1px solid var(--color-gold);
  --border-gold-faint:  1px solid rgba(201,168,76,.2);
  --border-gold-mid:    1px solid rgba(201,168,76,.3);

  /* Shadows */
  --shadow-soft: 0 4px 24px rgba(0,0,0,.08);
  --shadow-card: 0 2px 16px rgba(0,0,0,.06);

  /* Transitions */
  --transition-fast:   .15s ease;
  --transition-base:   .25s ease;
  --transition-slow:   .6s ease;

  /* Z-index layers */
  --z-popup: 9999;
  --z-nav:   100;
  --z-above: 10;
  --z-base:  1;
}