/* ============================================
   MMS Design Tokens — Single Source of Truth
   Dark Mode First | Trading Dashboard
   ============================================ */

:root {
  /* === Backgrounds === */
  --bg-primary:    #0b0f19;
  --bg-secondary:  #111827;
  --bg-tertiary:   #1a2332;
  --bg-hover:      #1e293b;
  --bg-active:     #253348;
  --bg-overlay:    rgba(0, 0, 0, 0.6);

  /* === Borders === */
  --border:        #1e293b;
  --border-subtle: #151d2e;
  --border-active: #334155;

  /* === Text === */
  --text-primary:   #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted:     #64748b;
  --text-disabled:  #475569;

  /* === Accent (Challenge Orange) === */
  --accent:        #f97316;
  --accent-hover:  #ea580c;
  --accent-muted:  rgba(249, 115, 22, 0.15);
  --accent-text:   #fdba74;

  /* === Semantic Colors === */
  --success:       #10b981;
  --success-muted: rgba(16, 185, 129, 0.15);
  --danger:        #ef4444;
  --danger-muted:  rgba(239, 68, 68, 0.15);
  --warning:       #f59e0b;
  --warning-muted: rgba(245, 158, 11, 0.15);
  --info:          #06b6d4;
  --info-muted:    rgba(6, 182, 212, 0.15);

  /* === PnL Colors (Trading-specific) === */
  --pnl-profit:    #10b981;
  --pnl-loss:      #ef4444;
  --pnl-neutral:   #64748b;

  /* === Typography (v3: nochmal +1px, xs/labels +2px) === */
  --font-family:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  --font-xs:       0.9375rem;   /* 15px (war 13→+2px fuer Labels/Sub-Text) */
  --font-sm:       1rem;        /* 16px (+1px) */
  --font-base:     1.0625rem;   /* 17px (+1px) */
  --font-lg:       1.1875rem;   /* 19px (+1px) */
  --font-xl:       1.4375rem;   /* 23px (+1px) */
  --font-2xl:      1.8125rem;   /* 29px (+1px) */
  --line-height:   1.5;

  /* === Spacing (4px base) === */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */

  /* === Layout === */
  --sidebar-collapsed: 56px;
  --sidebar-expanded:  220px;
  --topbar-height:     48px;
  --statusbar-height:  28px;
  --grid-gap:          12px;
  --card-radius:       8px;
  --card-padding:      var(--space-4);

  /* === Shadows === */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg:   0 8px 24px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 20px rgba(59,130,246,0.15);

  /* === Transitions === */
  --transition-fast:   120ms ease;
  --transition-normal: 200ms ease;
  --transition-slow:   300ms ease;

  /* === Z-Index Scale === */
  --z-base:      1;
  --z-sticky:    10;
  --z-sidebar:   20;
  --z-topbar:    30;
  --z-modal:     100;
  --z-command:   200;
  --z-toast:     300;
}

/* === Light Mode Override (High Contrast — outdoor/sunlight safe) === */
[data-theme="light"] {
  --bg-primary:    #f0f2f5;
  --bg-secondary:  #ffffff;
  --bg-tertiary:   #e8ecf0;
  --bg-hover:      #dce1e8;
  --bg-active:     #c8d0da;
  --bg-overlay:    rgba(0, 0, 0, 0.4);
  --border:        #c8d0da;
  --border-subtle: #dce1e8;
  --border-active: #a0aec0;
  /* Text: Maximaler Kontrast — WCAG AAA konform */
  --text-primary:   #0a0f1a;
  --text-secondary: #2d3748;
  --text-muted:     #4a5568;
  --text-disabled:  #a0aec0;
  /* Accent dunkler fuer Light Mode */
  --accent:        #2563eb;
  --accent-hover:  #1d4ed8;
  --accent-muted:  rgba(37, 99, 235, 0.12);
  --accent-text:   #1e40af;
  /* PnL Farben dunkler fuer Lesbarkeit auf Weiss */
  --pnl-profit:    #059669;
  --pnl-loss:      #dc2626;
  /* Semantic Colors dunkler */
  --success:       #059669;
  --danger:        #dc2626;
  --warning:       #d97706;
  --info:          #0891b2;
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.12);
  --shadow-lg:   0 8px 24px rgba(0,0,0,0.16);
}