/* ============================================================
   GOLDEN ARK SYSTEMS · DESIGN TOKENS
   Single source of truth for color, type, spacing, motion.
   Every component references these vars — never hardcode.
   ============================================================ */

:root {
  /* === COLOR · BRAND PALETTE ===
     Gold = wealth/outcomes  ·  Green = growth/success
     Blue = systems/logic    ·  Red   = warnings/risk
     Purple = insight        ·  Dark  = command-center surface */
  --gold:        #F5C842;
  --gold-light:  #FFE27A;
  --gold-dim:    rgba(245, 200, 66, 0.15);
  --gold-glow:   rgba(245, 200, 66, 0.35);

  --green:       #00E5A0;
  --green-dim:   rgba(0, 229, 160, 0.15);

  --blue:        #4A9EFF;
  --blue-dim:    rgba(74, 158, 255, 0.15);

  --orange:      #FF8C42;

  --red:         #FF5A5A;
  --red-dim:     rgba(255, 90, 90, 0.15);

  --purple:      #B47AFF;
  --purple-dim:  rgba(180, 122, 255, 0.15);

  /* === SURFACE · DARK COMMAND-CENTER === */
  --dark-0:      #06080C;   /* deepest void */
  --dark-1:      #0A0C10;   /* page bg */
  --dark-2:      #11141B;   /* card bg */
  --dark-3:      #181C26;   /* elevated card */

  --border-soft: rgba(255, 255, 255, 0.06);
  --border-mid:  rgba(255, 255, 255, 0.12);
  --border-gold: rgba(245, 200, 66, 0.20);

  /* === TEXT === */
  --text:        #E8EAF0;
  --text-dim:    #9CA3AF;
  --text-muted:  #6B7280;

  /* === TYPOGRAPHY ===
     Bebas Neue  → titles, hero numbers
     Rajdhani    → body, descriptions
     Space Mono  → system labels, data, meta */
  --font-title:  'Bebas Neue', 'Impact', sans-serif;
  --font-body:   'Rajdhani', 'Segoe UI', sans-serif;
  --font-mono:   'Space Mono', 'Consolas', monospace;

  /* === SPACING (8px base scale) === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* === RADIUS === */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-xl: 18px;

  /* === MOTION === */
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:  cubic-bezier(0.0, 0, 0.2, 1);
  --dur-fast:  150ms;
  --dur-mid:   250ms;
  --dur-slow:  400ms;

  /* === ELEVATION === */
  --shadow-1:  0 2px 8px rgba(0,0,0,0.25);
  --shadow-2:  0 8px 24px rgba(0,0,0,0.35);
  --shadow-3:  0 16px 48px rgba(0,0,0,0.45);
  --glow-gold: 0 0 24px var(--gold-dim);
  --glow-green: 0 0 24px var(--green-dim);
}

/* === ORANGE (Automation vertical) === */
:root {
  --orange-dim: rgba(255, 140, 66, 0.15);
}

/* === ACCENT VARIANT CLASSES ===
   Apply to any component to swap accent color via CSS var inheritance. */
.acc-gold   { --accent: var(--gold);   --accent-dim: var(--gold-dim); }
.acc-green  { --accent: var(--green);  --accent-dim: var(--green-dim); }
.acc-blue   { --accent: var(--blue);   --accent-dim: var(--blue-dim); }
.acc-red    { --accent: var(--red);    --accent-dim: var(--red-dim); }
.acc-purple { --accent: var(--purple); --accent-dim: var(--purple-dim); }
.acc-orange { --accent: var(--orange); --accent-dim: var(--orange-dim); }