/* ============================================================
   AUXIONMARKETS — Design Tokens
   Brand Brief: $100K Bespoke "Quiet Luxury"
   ============================================================ */

:root {
  /* ── Backgrounds ─────────────────────────────────────────── */
  --bg-primary:    #FFFFFF;   /* Pure white */
  --bg-surface:    #FAFAFA;   /* Ultra-faint off-white, far more elegant than flat grey */
  --bg-surface-2:  #FFFFFF;   /* Cards */
  --bg-footer:     #0F172A;   /* Pitch dark slate */

  /* ── Brand Accent ────────────────────────────────────────── */
  --accent:          #0052FF; /* JustMarkets Electric Blue */
  --accent-hover:    #2563EB;
  --accent-light:    rgba(0, 82, 255, 0.04); /* softer */

  /* ── Text ────────────────────────────────────────────────── */
  --text-dark:           #0A0F1C; /* "Expensive" Black - prevents screen burn */
  --text-dark-secondary: #334155;
  --text-muted:          #64748B;
  --text-light:          #94A3B8;
  --text-white:          #FFFFFF;

  /* ── Semantic ────────────────────────────────────────────── */
  --profit:   #16A34A; /* Corporate Green */
  --loss:     #EF4444; /* Clean Red */

  /* ── Borders ─────────────────────────────────────────────── */
  --border-faint:      rgba(15, 23, 42, 0.04);
  --border-light:      rgba(15, 23, 42, 0.08);
  --border-medium:     rgba(15, 23, 42, 0.15);

  /* ── Border Radii ────────────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-pill: 9999px;

  /* ── Layout ──────────────────────────────────────────────── */
  --section-py:    140px; /* generous desktop spacing */
  --section-py-sm: 80px;
  --container-max: 1240px; 
  --container-px:  24px;   /* Adjusted for smoother mobile margins */
  --nav-height:    80px;
  --nav-height-sm: 64px;   /* Slimmer mobile navbar */

  /* ── Typography Scale ────────────────────────────────────── */
  --font-heading: 'Inter', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-number:  'JetBrains Mono', 'SF Mono', 'Fira Code', 'Roboto Mono', monospace;

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  40px;
  --text-3xl:  56px;
  --text-4xl:  80px;
  --text-mega: 100px;

  /* ── Transitions ─────────────────────────────────────────── */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast:   0.3s var(--ease-out);
  --transition-base:   0.5s var(--ease-out);

  /* ── Matte Shadows ───────────────────────────────────────── */
  --shadow-sm:     0 4px 14px rgba(0,0,0,0.02);
  --shadow-md:     0 20px 40px rgba(0,0,0,0.03);
  --shadow-lg:     0 30px 60px rgba(0,20,50,0.04), 0 0 0 0.5px var(--border-light);
}