/* ==========================================================================
   MAGIC LEDGER DESIGN SYSTEM - DESIGN TOKENS (tokens.css)
   FAANG-Level Modular CSS Custom Properties for DATEV + Apple Aesthetics
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

:root {
  /* Color Palette - Canvas & Translucency */
  --ds-color-bg:               #07090e;
  --ds-color-bg-sidebar:       #0b0f19;
  --ds-color-card-bg:          rgba(17, 24, 39, 0.75);
  --ds-color-card-bg-hover:    rgba(24, 33, 53, 0.85);
  --ds-color-card-subtle:      rgba(30, 41, 59, 0.8);
  --ds-color-overlay:          rgba(0, 0, 0, 0.65);

  /* Border System */
  --ds-border-color:           rgba(255, 255, 255, 0.08);
  --ds-border-color-hover:     rgba(255, 255, 255, 0.16);
  --ds-border-color-accent:    rgba(99, 102, 241, 0.35);
  --ds-border-color-green:     rgba(16, 185, 129, 0.35);
  --ds-border-color-red:       rgba(239, 68, 68, 0.35);
  --ds-border-color-amber:     rgba(245, 158, 11, 0.35);

  /* Brand Accents */
  --ds-color-accent:           #6366f1;
  --ds-color-accent-hover:     #818cf8;
  --ds-color-accent-glow:      rgba(99, 102, 241, 0.25);
  --ds-color-accent-subtle:    rgba(99, 102, 241, 0.12);

  /* Semantic Status Colors (Apple HSL Glow Tokens) */
  --ds-color-green:            #10b981;
  --ds-color-green-light:      #86efac;
  --ds-color-green-bg:         rgba(16, 185, 129, 0.15);
  --ds-color-green-glow:       0 0 12px rgba(16, 185, 129, 0.2);

  --ds-color-red:              #ef4444;
  --ds-color-red-light:        #fca5a5;
  --ds-color-red-bg:           rgba(239, 68, 68, 0.15);
  --ds-color-red-glow:         0 0 12px rgba(239, 68, 68, 0.2);

  --ds-color-amber:            #f59e0b;
  --ds-color-amber-light:      #fcd34d;
  --ds-color-amber-bg:         rgba(245, 158, 11, 0.15);
  --ds-color-amber-glow:       0 0 12px rgba(245, 158, 11, 0.2);

  --ds-color-blue:             #3b82f6;
  --ds-color-blue-bg:          rgba(59, 130, 246, 0.15);

  /* Text Colors */
  --ds-color-text-primary:     #f3f4f6;
  --ds-color-text-secondary:   #c7d2fe;
  --ds-color-text-muted:       #9ca3af;
  --ds-color-text-dim:         #64748b;

  /* Typography Stack */
  --ds-font-sans:              'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
  --ds-font-mono:              'JetBrains Mono', SFMono-Regular, Consolas, 'Liberation Mono', monospace;

  /* Spacing System */
  --ds-space-xs:               4px;
  --ds-space-sm:               8px;
  --ds-space-md:               16px;
  --ds-space-lg:               24px;
  --ds-space-xl:               32px;
  --ds-space-2xl:              48px;

  /* Border Radii */
  --ds-radius-sm:              6px;
  --ds-radius-md:              10px;
  --ds-radius-lg:              14px;
  --ds-radius-xl:              18px;
  --ds-radius-pill:            999px;

  /* Glassmorphism & Elevation */
  --ds-blur-glass:             blur(20px) saturate(180%);
  --ds-shadow-card:            0 20px 40px -15px rgba(0, 0, 0, 0.5);
  --ds-shadow-glow:            0 0 30px rgba(99, 102, 241, 0.2);

  /* Transition Dynamics */
  --ds-transition-fast:        150ms cubic-bezier(0.4, 0, 0.2, 1);
  --ds-transition-spring:      250ms cubic-bezier(0.16, 1, 0.3, 1);
}