/* ============================================================
   tokens.css — ELITE Ecosystem Design Tokens
   Default values = Elite Concierge brand.
   Each brand overrides only what it needs in brand-[site].css.
   Load order: tokens.css → brand-[site].css → design-system.css
   ============================================================ */

:root {

  /* ── Colors ─────────────────────────────────────────────── */
  --brand-primary:          #dcb570;          /* gold — CTAs, accents, highlights */
  --brand-primary-hover:    #c9a05a;          /* gold darkened for hover state */
  --brand-accent:           #101820;          /* dark charcoal — used for reversed surfaces */
  --brand-bg:               #0c0c0c;          /* near-black page background */
  --brand-surface:          #101820;          /* card / panel / header background */
  --brand-surface-2:        #2a2a2a;          /* subtle surface, hover states */
  --brand-text:             #ffffff;          /* primary text on dark background */
  --brand-text-secondary:   #f8f8f8;          /* muted / label text */
  --brand-text-dark:        #101820;          /* text on light surfaces */
  --brand-light:            #f8f8f8;          /* off-white — light section backgrounds */
  --brand-white:            #ffffff;
  --brand-border:           rgba(255,255,255,0.1);
  --brand-border-strong:    rgba(255,255,255,0.2);

  /* ── Typography ─────────────────────────────────────────── */
  --brand-font-display:   'Satoshi', sans-serif;
  --brand-font-body:      'Satoshi', sans-serif;
  --brand-weight-light:   300;
  --brand-weight-regular: 400;
  --brand-weight-medium:  500;
  --brand-weight-bold:    700;

  /* ── Spacing scale ──────────────────────────────────────── */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   40px;
  --space-2xl:  64px;
  --space-3xl:  120px;

  /* ── Border radius ──────────────────────────────────────── */
  --brand-radius-sm:  4px;
  --brand-radius-md:  8px;
  --brand-radius-lg:  16px;
  --brand-radius-xl:  24px;
  --brand-radius-pill: 50px;

  /* ── Shadows ────────────────────────────────────────────── */
  --brand-shadow-sm: 0 4px 12px rgba(0,0,0,0.06);
  --brand-shadow-md: 0 10px 30px rgba(0,0,0,0.08);
  --brand-shadow-lg: 0 20px 60px rgba(0,0,0,0.12);

  /* ── Motion ─────────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Z-index scale ──────────────────────────────────────── */
  --z-base:    1;
  --z-above:   10;
  --z-nav:     100;
  --z-overlay: 9000;
  --z-modal:   9999;
}