/* ═══════════════════════════════════════════════════════
   TRAYDE & CO — BRAND TOKENS
   Single source of truth for all visual decisions.
   Edit values here to change the entire site.
   Do NOT put CSS rules here — only custom properties.
═══════════════════════════════════════════════════════ */

:root {
  /* ── Backgrounds ─────────────────────────────────── */
  --bg:          #0A0804;   /* obsidian — deepest base */
  --bg2:         #0F0C07;   /* elevated surface */
  --bg3:         #141009;   /* card background */
  --bg4:         #1A140B;   /* card hover / elevated card */

  /* ── Brand Accents ───────────────────────────────── */
  --ember:       #C8712A;   /* primary — copper/amber ember */
  --ember-light: #E08844;   /* ember hover / lighter */
  --ember-dim:   #7A4418;   /* ember muted / borders */
  --ember-glow:  rgba(200, 113, 42, 0.15);

  --gold:        #D4A853;   /* secondary — warm gold */
  --gold-dim:    rgba(212, 168, 83, 0.12);

  --ash:         #8C7B6B;   /* warm muted text */
  --stone:       #5C4E3D;   /* borders / dividers */
  --fog:         #2A2018;   /* subtle border */

  /* ── Semantic ────────────────────────────────────── */
  --positive:    #7EB89A;   /* success — muted sage green */
  --warning:     #C8A84B;   /* caution — warm amber */
  --negative:    #C8614A;   /* alert — muted terracotta */

  /* ── Typography ──────────────────────────────────── */
  --text:        #EDE4D4;   /* primary text — warm off-white */
  --text-dim:    #B8A898;   /* secondary text */
  --text-muted:  #7A6C5C;   /* placeholder / tertiary */

  /* ── Font stacks ─────────────────────────────────── */
  --ff-display:  'Cormorant Garamond', 'Georgia', serif;   /* editorial headlines */
  --ff-body:     'DM Sans', 'Inter', sans-serif;            /* body copy */
  --ff-mono:     'JetBrains Mono', 'Menlo', monospace;      /* data / code */

  /* ── Shared effects ──────────────────────────────── */
  --border:      rgba(200, 113, 42, 0.12);
  --border-soft: rgba(92, 78, 61, 0.4);
  --glow-ember:  0 0 60px rgba(200, 113, 42, 0.12);
  --glow-card:   0 24px 64px rgba(0, 0, 0, 0.6);

  /* ── Spacing scale ───────────────────────────────── */
  --space-xs:    4px;
  --space-sm:    8px;
  --space-md:    16px;
  --space-lg:    32px;
  --space-xl:    64px;
  --space-2xl:   128px;

  /* ── Radius ──────────────────────────────────────── */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
}