/* ============================================================
   TRADERCLUB — DESIGN TOKEN SYSTEM
   Refined-dark theme · tuned for readability & smooth motion
   Section 3 of TRADERCLUB-ARCHITECTURE.md
   ============================================================ */

:root {

  /* ── Backgrounds ──
     Softer navy-charcoal base (was near-black #080B10) to reduce
     the harsh contrast that caused eye strain. Borders lifted so
     surfaces read as distinct without shouting. */
  --color-bg-base:        #0E1117;
  --color-bg-surface:     #141A23;
  --color-bg-card:        #1A222E;
  --color-bg-card-hover:  #232E3D;
  --color-bg-border:      #2A3646;

  /* ── Gold — Prestige Accent ──
     Warmer, calmer gold (was #C9A227) — easier on the eye, still premium. */
  --color-gold-primary:   #D4AF37;
  --color-gold-light:     #ECC85C;
  --color-gold-dark:      #9A7B2E;
  --color-gold-glow:      rgba(212, 175, 55, 0.16);
  --color-gold-glow-sm:   rgba(212, 175, 55, 0.09);

  /* ── Orange — Energy / CTA ── */
  --color-orange:         #FF7A1A;
  --color-orange-light:   #FF9A4D;
  --color-orange-dark:    #D45F00;
  --color-orange-glow:    rgba(255, 122, 26, 0.15);

  /* ── Trade Colors ──
     Slightly desaturated so they don't vibrate against the dark bg. */
  --color-bull:           #2BD67B;
  --color-bear:           #FF4D6A;
  --color-bull-muted:     rgba(43, 214, 123, 0.13);
  --color-bear-muted:     rgba(255, 77, 106, 0.11);

  /* ── Typography Colors ──
     Soft off-white instead of pure #FFF; muted/disabled lifted for
     readable contrast on the new background. */
  --color-text-primary:   #ECEFF6;
  --color-text-secondary: #C5CEDE;
  --color-text-muted:     #8A97AE;
  --color-text-disabled:  #5C6982;

  /* ── Rank Colors ── */
  --color-rank-1:         #F5D462;
  --color-rank-2:         #C9D0DB;
  --color-rank-3:         #D08A4E;

  /* ── Font Families ──
     Space Grotesk: modern geometric display, far more legible than
     the old Orbitron. Inter remains the body workhorse. */
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* ── Font Weights ──
     Space Grotesk tops out at 700; "black" maps to 700 to avoid
     faux-bold smearing. */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    700;

  /* ── Type Scale ── */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */
  --text-7xl:  4.5rem;     /* 72px */

  /* ── Spacing ── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* ── Border Radius ── */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;

  /* ── Shadows ──
     Softer, more diffused — depth without heavy black halos. */
  --shadow-gold:       0 0 22px rgba(212, 175, 55, 0.26),
                       0 0 56px rgba(212, 175, 55, 0.09);
  --shadow-orange:     0 0 22px rgba(255, 122, 26, 0.30),
                       0 0 56px rgba(255, 122, 26, 0.10);
  --shadow-card:       0 6px 26px rgba(0, 0, 0, 0.38);
  --shadow-card-hover: 0 12px 44px rgba(0, 0, 0, 0.50),
                       0 0 0 1px rgba(212, 175, 55, 0.16);

  /* ── Transitions ──
     Eased curves for smoother, less mechanical motion. */
  --ease-out:        cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 160ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-base: 280ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-slow: 450ms cubic-bezier(0.22, 1, 0.36, 1);

  /* ── Z-Index ── */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* ── Layout ── */
  --container-max: 1280px;
  --container-pad: 1rem;
  --nav-height:    72px;
}

@media (min-width: 768px) {
  :root {
    --container-pad: 2rem;
  }
}

@media (min-width: 1200px) {
  :root {
    --container-pad: 3rem;
  }
}