/* ============================================================================
   Mission Control — Design Tokens (v11 — Mobile-First Rewrite)
   KEINE externen Fonts, KEIN backdrop-filter, KEIN glass-blur
   ============================================================================ */

:root {
  /* --- Hintergruende (solide, kein rgba) --- */
  --bg-base:        #0d1117;
  --bg-surface:     #151b23;
  --bg-elevated:    #1c2333;
  --bg-recessed:    #090c10;
  --bg-overlay:     rgba(0, 0, 0, 0.7);

  /* --- Borders --- */
  --border-subtle:  #252d38;
  --border-default: #30363d;
  --border-active:  #3d4a5c;
  --border-accent:  rgba(240, 136, 62, 0.35);
  --border-radius-sm: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 16px;
  --border-radius-xl: 20px;
  --border-radius-full: 9999px;

  /* --- Akzent: Warm Orange --- */
  --accent-primary:    #f0883e;
  --accent-primary-lt: #f5a560;
  --accent-primary-dk: #d4702a;
  --accent-glow:       rgba(240, 136, 62, 0.12);
  --accent-glow-strong: rgba(240, 136, 62, 0.25);

  /* --- Akzent: Electric Blue --- */
  --accent-secondary:    #58a6ff;
  --accent-secondary-lt: #79bfff;
  --accent-secondary-dk: #388bfd;

  /* --- Semantische Farben --- */
  --status-ok:       #3fb950;
  --status-ok-bg:    rgba(63, 185, 80, 0.1);
  --status-warn:     #d29922;
  --status-warn-bg:  rgba(210, 153, 34, 0.1);
  --status-critical: #f85149;
  --status-critical-bg: rgba(248, 81, 73, 0.1);
  --status-info:     #58a6ff;
  --status-info-bg:  rgba(88, 166, 255, 0.1);

  /* --- Text --- */
  --text-primary:    #e6edf3;
  --text-secondary:  #8b949e;
  --text-muted:      #484f58;
  --text-inverse:    #0d1117;

  /* --- Typografie (System-Fonts) --- */
  --font-display: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    'SF Mono', SFMono-Regular, ui-monospace, 'Cascadia Code', 'Consolas', monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;
  --text-3xl:  2.5rem;
  --text-4xl:  3rem;

  --tracking-tight:  -0.025em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;

  --leading-tight:  1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* --- Spacing (8px Basis) --- */
  --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;

  /* --- Layout --- */
  --sidebar-width:     260px;
  --bottom-nav-height:  64px;
  --content-max-width: 1400px;
  --card-min-width:    280px;

  /* --- Z-Index (3 Stufen) --- */
  --z-fixed:  10;
  --z-modal:  20;
  --z-toast:  30;

  /* Aliase fuer Kompatibilitaet mit altem Code */
  --z-sidebar:  10;
  --z-topbar:   10;
  --z-dropdown: 10;

  /* --- Effekte (OHNE Glass/Blur) --- */
  --gradient-hero:   linear-gradient(135deg, #f0883e 0%, #58a6ff 50%, #3fb950 100%);
  --gradient-card:   linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-surface) 100%);
  --shadow-sm:       0 1px 3px rgba(0,0,0,0.3);
  --shadow-md:       0 4px 12px rgba(0,0,0,0.25);
  --shadow-lg:       0 8px 32px rgba(0,0,0,0.3);
  --shadow-glow:     0 0 40px var(--accent-glow);
  --shadow-glow-strong: 0 0 60px var(--accent-glow-strong);

  /* --- Transitions --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:   0.15s;
  --duration-normal: 0.25s;
  --duration-slow:   0.4s;
}

/* ============================================================================
   Light Theme
   ============================================================================ */
[data-theme="light"] {
  --bg-base:        #f5f6f8;
  --bg-surface:     #ffffff;
  --bg-elevated:    #f0f1f4;
  --bg-recessed:    #e8eaed;
  --bg-overlay:     rgba(0, 0, 0, 0.5);

  --border-subtle:  #dfe2e6;
  --border-default: #ced2d8;
  --border-active:  #b0b8c4;
  --border-accent:  rgba(210, 112, 42, 0.35);

  --accent-primary:    #d4702a;
  --accent-primary-lt: #e8863e;
  --accent-primary-dk: #b55e1f;
  --accent-glow:       rgba(212, 112, 42, 0.08);
  --accent-glow-strong: rgba(212, 112, 42, 0.18);

  --accent-secondary:    #2b6fc2;
  --accent-secondary-lt: #4088d6;
  --accent-secondary-dk: #1d5ba6;

  --status-ok:       #2a8c3e;
  --status-ok-bg:    rgba(42, 140, 62, 0.08);
  --status-warn:     #a07518;
  --status-warn-bg:  rgba(160, 117, 24, 0.08);
  --status-critical: #d42a2a;
  --status-critical-bg: rgba(212, 42, 42, 0.06);
  --status-info:     #2b6fc2;
  --status-info-bg:  rgba(43, 111, 194, 0.06);

  --text-primary:    #1a1f26;
  --text-secondary:  #57606a;
  --text-muted:      #8b949e;
  --text-inverse:    #ffffff;

  --gradient-hero:   linear-gradient(135deg, #d4702a 0%, #2b6fc2 50%, #2a8c3e 100%);
  --gradient-card:   linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-surface) 100%);
  --shadow-sm:       0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:       0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg:       0 8px 32px rgba(0,0,0,0.08);
  --shadow-glow:     0 0 40px var(--accent-glow);
  --shadow-glow-strong: 0 0 60px var(--accent-glow-strong);
}