/* ============================================================
   QTradeX · Design Tokens
   Version 1.0 · 27.05.2026
   Verbindlich. Keine Eigenmächtigkeiten.
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     FARBEN — flach, keine Verläufe
     ---------------------------------------------------------- */

  /* Primäre Bühne */
  --color-black:          #000000;

  /* Schriftzug · Linien · Text */
  --color-platin:         #D6D2C4;
  --color-platin-dim:     #9B9789;   /* gedimmt für sekundären Text */
  --color-platin-subtle:  #4A4840;   /* sehr subtil, Trennlinien */

  /* Akzent · X · Links · Buttons */
  --color-royal:          #2A4A9E;
  --color-royal-hover:    #3558B8;   /* leicht heller für Hover */
  --color-royal-dim:      #1E3570;   /* gedimmt für Hintergründe */

  /* Semantische Farben */
  --color-bg:             var(--color-black);
  --color-text:           var(--color-platin);
  --color-text-secondary: var(--color-platin-dim);
  --color-text-tertiary:  var(--color-platin-subtle);
  --color-accent:         var(--color-royal);
  --color-accent-hover:   var(--color-royal-hover);
  --color-border:         var(--color-platin-subtle);
  --color-border-strong:  var(--color-platin-dim);

  /* Status-Farben (Dashboard) */
  --color-positive:       #2E7D52;   /* Grün — dezent, nicht grell */
  --color-negative:       #8B2E2E;   /* Rot — dezent */
  --color-positive-text:  #5DB882;
  --color-negative-text:  #C96060;

  /* ----------------------------------------------------------
     SCHRIFTEN
     ---------------------------------------------------------- */

  --font-brand:    'Spectral', serif;
  --font-ui:       'Inter', sans-serif;
  --font-data:     'JetBrains Mono', monospace;

  /* ----------------------------------------------------------
     TYPOGRAFISCHE SKALA
     ---------------------------------------------------------- */

  --text-display:      56px;
  --text-h1:           36px;
  --text-h2:           28px;
  --text-h3:           20px;
  --text-lead:         18px;
  --text-body:         16px;
  --text-body-small:   14px;
  --text-caption:      12px;
  --text-data:         14px;
  --text-data-large:   24px;

  /* Gewichte */
  --weight-light:      300;
  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semibold:   600;

  /* ----------------------------------------------------------
     ABSTÄNDE — 8er-Raster
     ---------------------------------------------------------- */

  --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;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;
  --space-32:  128px;
  --space-40:  160px;

  /* ----------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------- */

  --container-max:     1200px;
  --container-narrow:   800px;
  --container-padding:   var(--space-8);   /* 32px seitlich */

  /* ----------------------------------------------------------
     ÜBERGÄNGE & ANIMATIONEN
     ---------------------------------------------------------- */

  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* ----------------------------------------------------------
     RADIEN
     ---------------------------------------------------------- */

  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;

  /* ----------------------------------------------------------
     LINIEN
     ---------------------------------------------------------- */

  --border-thin:    1px solid var(--color-border);
  --border-strong:  1px solid var(--color-border-strong);

  /* ----------------------------------------------------------
     SCHATTEN — dezent, nur für Tiefe in Karten
     ---------------------------------------------------------- */

  --shadow-card:  0 1px 3px rgba(0, 0, 0, 0.6), 0 4px 16px rgba(0, 0, 0, 0.4);

  /* ----------------------------------------------------------
     Z-INDEX-STACK
     ---------------------------------------------------------- */

  --z-base:     0;
  --z-above:   10;
  --z-nav:    100;
  --z-overlay: 200;
  --z-modal:   300;

}

/* ----------------------------------------------------------
   RESPONSIVE ANPASSUNGEN
   ---------------------------------------------------------- */

@media (max-width: 768px) {
  :root {
    --text-display:   clamp(32px, 8vw, 56px);
    --text-h1:        clamp(24px, 6vw, 36px);
    --text-h2:        clamp(20px, 5vw, 28px);
    --container-padding: var(--space-5);   /* 20px auf Mobile */
  }
}