/* ═══════════════════════════════════════════════════════════════
   VIANA ASSETS — Design System Tokens  v3.0
   THE SINGLE SOURCE OF TRUTH FOR ALL DESIGN VALUES
   No other CSS file shall define colors, spacing, or typography.
═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Color Palette ─────────────────────────────────────── */

  /* Backgrounds */
  --color-bg-base:       #080810;
  --color-bg-primary:    #0d0d18;
  --color-bg-secondary:  #11111e;
  --color-bg-elevated:   #161625;
  --color-bg-card:       #14141f;
  --color-bg-card-hover: #1a1a2a;
  --color-bg-overlay:    rgba(8, 8, 16, 0.85);
  --color-bg-input:      rgba(255, 255, 255, 0.04);
  --color-bg-input-focus:rgba(255, 255, 255, 0.07);

  /* Borders */
  --color-border:        rgba(255, 255, 255, 0.07);
  --color-border-strong: rgba(255, 255, 255, 0.13);
  --color-border-focus:  rgba(124, 92, 252, 0.6);

  /* Accent – Primary Purple */
  --color-accent:        #7c5cfc;
  --color-text-on-color: #ffffff;  /* Weiß — für Text auf farbigen Elementen (btn-primary, badges) */
  --color-accent-hover:  #9678fd;
  --color-accent-muted:  rgba(124, 92, 252, 0.15);
  --color-accent-glow:   rgba(124, 92, 252, 0.25);

  /* Gold – Premium Brand */
  --color-gold:          #c8a96e;
  --color-gold-bright:   #d4b87a;
  --color-gold-muted:    rgba(200, 169, 110, 0.12);
  --color-gold-glow:     rgba(200, 169, 110, 0.2);

  /* Semantic Colors */
  --color-success:       #00d4a0;
  --color-success-muted: rgba(0, 212, 160, 0.12);
  --color-success-glow:  rgba(0, 212, 160, 0.2);

  --color-warning:       #f59e0b;
  --color-warning-muted: rgba(245, 158, 11, 0.12);

  --color-danger:        #f04060;
  --color-danger-muted:  rgba(240, 64, 96, 0.12);
  --color-danger-glow:   rgba(240, 64, 96, 0.2);

  --color-info:          #3b9eff;
  --color-info-muted:    rgba(59, 158, 255, 0.12);

  /* Text */
  --color-text-primary:   #f0effe;
  --color-text-secondary: #8b8aab;
  --color-text-muted:     #4d4c73;
  --color-text-disabled:  #2d2c4a;
  --color-text-inverse:   #080810;

  /* Chart Colors */
  --color-chart-1: #7c5cfc;
  --color-chart-2: #00d4a0;
  --color-chart-3: #c8a96e;
  --color-chart-4: #3b9eff;
  --color-chart-5: #f59e0b;
  --color-chart-6: #f04060;
  --color-chart-grid: rgba(255, 255, 255, 0.04);
  --color-chart-axis: rgba(255, 255, 255, 0.08);

  /* ── Typography ────────────────────────────────────────── */
  --font-sans:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-mono:    'DM Mono', 'JetBrains Mono', 'Fira Code', monospace;

  /* Font Sizes (fluid scale) */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  38px;
  --text-5xl:  48px;

  /* Font Weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold:800;

  /* Line Heights */
  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;

  /* Letter Spacing */
  --tracking-tight:  -0.03em;
  --tracking-normal: -0.01em;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.08em;
  --tracking-widest: 0.12em;

  /* ── Spacing System (4px base) ─────────────────────────── */
  --space-px:  1px;
  --space-0-5: 2px;
  --space-1:   4px;
  --space-1-5: 6px;
  --space-2:   8px;
  --space-2-5: 10px;
  --space-3:   12px;
  --space-3-5: 14px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-9:   36px;
  --space-10:  40px;
  --space-12:  48px;
  --space-14:  56px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* ── Border Radius ─────────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   18px;
  --radius-2xl:  24px;
  --radius-3xl:  32px;
  --radius-full: 9999px;

  /* ── Elevation / Shadows ───────────────────────────────── */
  --shadow-xs:    0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md:    0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg:    0 8px 32px rgba(0, 0, 0, 0.55);
  --shadow-xl:    0 16px 48px rgba(0, 0, 0, 0.6);
  --shadow-2xl:   0 24px 64px rgba(0, 0, 0, 0.65);
  --shadow-card:  0 4px 24px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255,255,255,0.04) inset;
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255,255,255,0.06);
  --shadow-accent:0 4px 20px rgba(124, 92, 252, 0.3);
  --shadow-gold:  0 4px 20px rgba(200, 169, 110, 0.2);

  /* ── Motion / Transitions ──────────────────────────────── */
  --duration-fast:   120ms;
  --duration-normal: 200ms;
  --duration-slow:   350ms;
  --duration-slower: 500ms;

  --ease-default:  cubic-bezier(0.2, 0, 0, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-smooth:   cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* ── Layout ────────────────────────────────────────────── */
  --sidebar-width:       260px;
  --sidebar-width-sm:    72px;
  --topbar-height:       60px;
  --content-max-width:   1400px;
  --content-padding-x:   var(--space-8);
  --content-padding-y:   var(--space-8);

  /* ── Z-Index Scale ─────────────────────────────────────── */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;
}

/* ── Responsive token overrides ─────────────────────────── */
@media (max-width: 768px) {
  :root {
    --content-padding-x: var(--space-4);
    --content-padding-y: var(--space-5);
    --text-4xl: 28px;
    --text-3xl: 22px;
  }
}