/* ============================================================
   David Holdings — Design Tokens
   The single source of truth for colour, type, spacing & motion.
   Extracted verbatim from the Claude Design source, then extended
   into a full 8px spacing scale and type scale for the wider site.
   Import this FIRST on every page.
   ============================================================ */

:root {
  /* ---------- Colour: backgrounds ---------- */
  --color-bg-dark:    #0A0A0A;   /* hero, dark sections, footer, CTA */
  --color-bg-dark-2:  #0D0D0D;   /* trading dashboard surround */
  --color-bg-panel:   #0F0F0F;   /* terminal panels */
  --color-bg-cream:   #FAF8F3;   /* primary content background */
  --color-bg-cream-2: #F5F1E8;   /* alternating content background */
  --color-bg-cream-3: #ECE5D3;   /* inset chart tracks, dividers */

  /* ---------- Colour: gold (the brand) ---------- */
  --color-gold-primary: #D4B26A; /* refined antique gold — primary */
  --color-gold-accent:  #EAD08A; /* brighter highlight — hovers, key numbers */
  --color-gold-deep:    #9A7B36; /* borders, rules, small-caps text */
  --color-gold-shadow:  rgba(154, 123, 54, 0.10); /* tight warm shadow */

  /* ---------- Colour: text ---------- */
  --color-text-light:   #F5F1E8; /* body on dark */
  --color-text-light-2: rgba(245, 241, 232, 0.78); /* muted on dark */
  --color-text-light-3: rgba(245, 241, 232, 0.55); /* faint on dark */
  --color-text-dark:    #1A1410; /* warm charcoal-brown body on cream */
  --color-text-dark-2:  rgba(26, 20, 16, 0.70);  /* muted on cream */
  --color-text-dark-3:  rgba(26, 20, 16, 0.55);  /* faint on cream */

  /* ---------- Colour: market signal (muted, never neon) ---------- */
  --color-up:        #7BB37A;  /* positive on dark */
  --color-down:      #C17878;  /* negative on dark */
  --color-up-ink:    #2A6B3B;  /* positive on cream */
  --color-down-ink:  #8B3A3A;  /* negative on cream */

  /* ---------- Borders, rules & radii ---------- */
  --border-hairline:  1px solid var(--rule);
  --rule:        rgba(154, 123, 54, 0.44); /* hairline on cream */
  --rule-soft:   rgba(154, 123, 54, 0.20); /* faint hairline on cream */
  --rule-dark:   rgba(212, 178, 106, 0.26);/* hairline on dark */
  --radius-sm: 2px;
  --radius-md: 4px;

  /* ---------- Typography: families ---------- */
  --font-display: "Cormorant Garamond", "Cardo", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* aliases used by some component code */
  --serif: var(--font-display);
  --sans:  var(--font-body);
  --mono:  var(--font-mono);

  /* ---------- Typography: fluid sizes ---------- */
  --text-xs:   11.5px;
  --text-sm:   13px;
  --text-base: 17px;
  --text-lg:   18px;
  --text-xl:   clamp(20px, 2.2vw, 24px);
  --text-2xl:  clamp(24px, 2.4vw, 30px);
  --text-3xl:  clamp(34px, 4vw, 48px);   /* h2 */
  --text-4xl:  clamp(44px, 6.4vw, 78px); /* h1 */
  --text-display: clamp(44px, 6.4vw, 78px);

  /* ---------- Spacing: 8px scale ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---------- Layout ---------- */
  --max:    1280px;
  --max-doc: 760px;            /* legal / long-form reading width */
  --gutter: clamp(20px, 4vw, 56px);

  /* ---------- Motion ---------- */
  --transition-fast: .2s ease;
  --transition-base: .35s ease;
  --ease-slide: cubic-bezier(.22, .7, .25, 1);

  /* ---------- Legacy aliases (mirror the original prototype names
     so component CSS lifted from the design keeps resolving) ---------- */
  --black:       var(--color-bg-dark);
  --black-2:     var(--color-bg-dark-2);
  --ink:         var(--color-text-dark);
  --cream:       var(--color-bg-cream);
  --cream-2:     var(--color-bg-cream-2);
  --cream-3:     var(--color-bg-cream-3);
  --gold:        var(--color-gold-primary);
  --gold-bright: var(--color-gold-accent);
  --gold-deep:   var(--color-gold-deep);
  --gold-shadow: var(--color-gold-shadow);
}