/* ==========================================================================
   EdgeTrading · Design System "Ion"  —  Design Tokens
   Single source of truth. Werte 1:1 aus den Mockups.
   Einbinden: <link rel="stylesheet" href="ion-tokens.css"> (vor allem CSS)
   ========================================================================== */

:root{
  /* ---- Farben: Flächen / Hintergründe ---- */
  --et-bg:            #070b14;  /* App-Hintergrund (Deep Navy) */
  --et-bg-2:          #0a1120;  /* Sidebar-Verlauf, tiefere Fläche */
  --et-panel:         #0e1728;  /* Karten / Panels */
  --et-panel-2:       #111d33;  /* Panel hell (Verlauf-Top, Hover) */

  /* ---- Farben: Linien / Border ---- */
  --et-line:          #1b2a44;  /* Standard-Border, Trenner */
  --et-line-2:        #26395c;  /* betonte Border, Hover */

  /* ---- Farben: Text ---- */
  --et-text:          #eaf0fb;  /* Primärtext (Ice White, NICHT #fff) — ratio 16.8:1 */
  --et-text-dim:      #adb8d0;  /* Sekundärtext — heller für Lesbarkeit, ratio ~10.7:1 */
  --et-text-mute:     #8996b3;  /* Labels, Captions — WCAG AA, ratio ~6.3:1 */

  /* ---- Farben: Marke / Akzent ---- */
  --et-blue:          #4d7cff;  /* PRIMÄR: Aktionen, Links, aktiver State */
  --et-blue-2:        #6a90ff;  /* Gradient-Endpunkt für Buttons */
  --et-blue-soft:     rgba(77,124,255,.14);  /* Blue-Tint-Flächen/Badges */
  --et-mint:          #2ee6b6;  /* AKZENT: Signale, Live, positiv */
  --et-mint-soft:     rgba(46,230,182,.12);

  /* ---- Farben: Semantik ---- */
  --et-pos:           #2ee6b6;  /* Gewinn / up (= Mint) */
  --et-neg:           #ff617e;  /* Verlust / down */
  --et-ink:           #ffffff;  /* Text auf Blau-/Gradient-Flächen */
  --et-ink-dark:      #04121e;  /* Text/Facette auf Mint-/hellen Flächen */

  /* ---- Gradients ---- */
  --et-grad-btn:      linear-gradient(90deg, #4d7cff, #6a90ff);   /* Primär-Button */
  --et-grad-brand:    linear-gradient(135deg, #4d7cff, #2ee6b6);  /* Avatar, App-Icon */
  --et-glow-mint:     radial-gradient(1100px 560px at 82% -10%, rgba(46,230,182,.12), transparent 60%);
  --et-glow-blue:     radial-gradient(820px 460px at 0% 0%, rgba(77,124,255,.14), transparent 55%);

  /* ---- Typografie ---- */
  --et-font-display:  'Space Grotesk','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; /* H1–H3, Zahlen */
  --et-font-body:     'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;                 /* Fließtext */
  --et-font-mono:     'JetBrains Mono','SFMono-Regular',ui-monospace,'Roboto Mono',Menlo,Consolas,monospace; /* Daten, Labels, Ticker */

  --et-fs-display:    28px;   /* H1 */
  --et-fs-h2:         17px;
  --et-fs-h3:         14.5px;
  --et-fs-kpi:        37px;   /* große Kennzahl */
  --et-fs-body:       14px;
  --et-fs-sm:         12px;
  --et-fs-xs:         11px;
  --et-fs-label:      10.5px; /* mono uppercase labels */

  --et-fw-regular:    400;
  --et-fw-medium:     500;
  --et-fw-bold:       700;
  --et-tracking-label:.08em;  /* letter-spacing für mono-Labels */

  /* ---- Radius ---- */
  --et-r-sm:          8px;    /* Segmente, kleine Chips */
  --et-r-md:          10px;   /* Buttons, Pills */
  --et-r-lg:          14px;   /* KPI-Karten, Reports */
  --et-r-xl:          16px;   /* Panels */
  --et-r-2xl:         22px;   /* Logo-Container, Hero */
  --et-r-pill:        20px;   /* Badges/Pills rund */

  /* ---- Spacing (4er-Raster) ---- */
  --et-sp-1:          4px;
  --et-sp-2:          8px;
  --et-sp-3:          12px;
  --et-sp-4:          14px;   /* Standard-Gap Grid */
  --et-sp-5:          18px;
  --et-sp-6:          22px;   /* Sektions-Gap */
  --et-sp-7:          26px;   /* Content-Padding */

  /* ---- Sonstiges ---- */
  --et-sidebar-w:     242px;
  --et-transition:    .15s ease;
  --et-transition-lg: .2s ease;

  /* ==========================================================================
     LEGACY-ALIASES — damit alter data.js-Code (SVG-Charts, Panels) auf Ion läuft
     Ohne diese wurden Chart-Beschriftungen schwarz gerendert.
     ========================================================================== */
  --bg:              var(--et-bg);
  --panel:           var(--et-panel);
  --panel-2:         var(--et-panel-2);
  --panel-3:         var(--et-panel-2);
  --line:            var(--et-line);
  --line-strong:     var(--et-line-2);
  --text:            var(--et-text);
  --text-dim:        var(--et-text-dim);
  --text-faint:      var(--et-text-mute);
  --accent:          var(--et-blue);
  --accent-dim:      var(--et-blue-soft);
  --accent-strong:   rgba(77,124,255,.25);
  --orange:          #FF6210;
  --amber:           #fbbf24;
  --blue:            #38bdf8;
  --success:         var(--et-mint);
  --danger:          var(--et-neg);
  --purple:          #a78bfa;
  --sans:            var(--et-font-body);
  --mono:            var(--et-font-mono);
}