@import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700&family=Victor+Mono:wght@400;500;600;700&display=swap");

/* tingler-tokens.css — exportiert aus Theme Editor V2 */
:root,
:root[data-color-scheme="dark"] {
  --ta-accent:          #36D3C3;
  --ta-accent-rgb:      54, 211, 195;
  --ta-accent-dark:     #2ba99c;
  --ta-accent-bright:   #7ae2d7;
  --ta-accent-soft:     rgba(var(--ta-accent-rgb), 0.10);
  --ta-on-accent:       #06231F;
  --ta-hover:           #7ae2d7;
  --ta-hover-rgb:       45, 212, 191;
  --ta-bg:              #0C0E11;
  --ta-bg-surface:      #16181b;
  --ta-bg-card:         #161B22;
  --ta-border:          rgba(var(--ta-accent-rgb), 0.18);
  --ta-border-subtle:   rgba(255, 255, 255, 0.07);
  --ta-text-primary:    #E8EDF2;
  --ta-text-secondary:  #E8EDF2;
  --ta-text-muted:      #E8EDF2;
  --ta-pos:             #34FE92;
  --ta-neg:             #FF4538;
  --ta-warn:            #E2B45C;
  --ta-input-bg:        #131518;
  --ta-input-border:    rgba(var(--ta-accent-rgb), 0.20);
  --ta-input-text:      var(--ta-text-primary);
  --ta-input-placeholder: var(--ta-text-muted);
  --ta-input-focus:     rgba(var(--ta-accent-rgb), 0.18);
  --ta-btn-grad:        linear-gradient(120deg, var(--ta-accent-bright), var(--ta-accent));
  --ta-btn-text:        var(--ta-on-accent);
  --ta-btn-glow:        0 8px 22px rgba(var(--ta-accent-rgb), 0.240);
  --ta-btn-glow-hover:  0 10px 28px rgba(var(--ta-accent-rgb), 0.360);
  --ta-btn-outline-border: var(--ta-accent);
  --ta-btn-outline-text:   var(--ta-hover);
  --ta-chart-up:        var(--ta-accent);
  --ta-chart-down:      #274946;
  --ta-chart-deficit:   #A8281F;
  --ta-chart-need:      #D96120;
  --ta-chart-growth:    var(--ta-pos);
  --ta-chart-grid:      var(--ta-border-subtle);
  --ta-chart-axis:      var(--ta-text-muted);
  --ta-series-1:        var(--ta-accent);
  --ta-series-2:        var(--ta-warn);
  --ta-series-3:        var(--ta-neg);
  --ta-series-4:        #8B9DE0;
  --ta-series-5:        #9AA7B5;
  --ta-band-fill:       var(--ta-accent);
  --ta-band-min:        var(--ta-text-primary);
  --ta-band-max:        var(--ta-accent-dark);
  --ta-band-under:      var(--ta-pos);
  --ta-band-fair:       var(--ta-warn);
  --ta-band-over:       var(--ta-neg);
  --ta-map-water:       var(--ta-bg-surface);
  --ta-map-land:        rgba(255, 255, 255, 0.035);
  --ta-map-land-stroke: rgba(255, 255, 255, 0.08);
  --ta-map-data:        rgba(var(--ta-accent-rgb), 0.22);
  --ta-map-data-stroke: rgba(var(--ta-accent-rgb), 0.55);
  --ta-map-graticule:   rgba(255, 255, 255, 0.05);
  --ta-bubble-fill:     var(--ta-bg-card);
  --ta-bubble-stroke:   var(--ta-accent);
  --ta-bubble-text:     var(--ta-hover);
  --ta-bubble-hover-fill: var(--ta-accent);
  --ta-bubble-hover-text: #0C0E11;
  --ta-font-display:    'Libre Baskerville', Georgia, serif;
  --ta-font-body:       'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --ta-font-mono:       'Victor Mono', 'SF Mono', Menlo, Consolas, monospace;
  --ta-size-base:       16px;
  --ta-font-scale:      1.000;
  --ta-chart-scale:     1.00;
  --ta-radius-card:     10px;
  --ta-radius-control:  5px;
  --ta-radius-pill:     999px;
  --ta-shadow-card:     0 1px 2px rgba(0, 0, 0, 0.28), 0 10px 30px rgba(0, 0, 0, 0.34);
  --ta-shadow-deep:     0 14px 32px -8px rgba(0, 0, 0, 0.45);
  --ta-hero-grad:       linear-gradient(120deg, var(--ta-accent-bright), var(--ta-accent));
  --ta-hero-glow:       0 10px 34px rgba(var(--ta-accent-rgb), 0.180);
  --ta-ease:            cubic-bezier(0.4, 0, 0.2, 1);
  --ta-dur-base:        250ms;
  --ta-dur-slow:        400ms;
  --ta-header-height:   72px;

  /* Kompatibilitaets-Aliase (nach Migration loeschen) */
  --ta-accent-2:        var(--ta-hover);
  --ta-accent-muted:    var(--ta-accent-soft);
  --ta-hover-muted:     var(--ta-accent-soft);
  --ta-surface:         var(--ta-bg-card);
  --ta-surface-2:       var(--ta-bg-surface);
  --ta-text:            var(--ta-text-primary);
  --ta-shadow:          var(--ta-shadow-card);
  --ta-shadow-md:       var(--ta-shadow-card);
  --ta-shadow-lg:       var(--ta-shadow-deep);
  --r:                  var(--ta-radius-card);
  --ta-field-bg:        var(--ta-input-bg);
  --ta-field-border:    var(--ta-input-border);
  --ta-field-text:      var(--ta-input-text);
  --ta-field-focus:     var(--ta-input-focus);
  --ta-input:           var(--ta-input-bg);
  --ta-chart-gap:       var(--ta-neg);
  --ta-need:            var(--ta-warn);
  --ta-cum:             var(--ta-warn);
  --ta-growth:          var(--ta-pos);
  --ta-header-bg:       rgba(12, 14, 17, 0.96);
  --ta-topbar-bg:       #090B0E;
  --ta-footer-bg:       #090B0E;
  --ta-sidebar-bg:      #111418;

  /* Optionsschein-Calculator (.pcc-*) — Vokabular-Bruecke */
  --ta-fg:              var(--ta-text-primary);
  --ta-fg-2:            var(--ta-text-secondary);
  --ta-fg-muted:        var(--ta-text-muted);
  --ta-bg-2:            var(--ta-bg-surface);
  --ta-bg-3:            var(--ta-bg-card);
  --ta-bg-elev:         var(--ta-bg-card);
  --ta-accent-3:        var(--ta-accent-dark);
  --ta-border-2:        var(--ta-border-subtle);
  --ta-danger:          var(--ta-neg);
  --ta-success:         var(--ta-pos);
  --ta-warning:         var(--ta-warn);
  --ta-radius:          var(--ta-radius-control);
  --ta-radius-lg:       var(--ta-radius-card);
}

:root[data-color-scheme="light"] {
  --ta-accent:          #2ba99c;
  --ta-accent-rgb:      13, 148, 136;
  --ta-accent-dark:     #0F766E;
  --ta-accent-bright:   #36D3C3;
  --ta-on-accent:       #FFFFFF;
  --ta-hover:           #0F766E;
  --ta-bg:              #F5F3EE;
  --ta-bg-surface:      #FAFAF8;
  --ta-bg-card:         #FFFFFF;
  --ta-border:          rgba(13, 148, 136, 0.18);
  --ta-border-subtle:   rgba(0, 0, 0, 0.08);
  --ta-text-primary:    #16201E;
  --ta-text-secondary:  #44504D;
  --ta-text-muted:      #5E6A66;
  --ta-pos:             #1F7A4D;
  --ta-neg:             #B23A36;
  --ta-warn:            #9A6A17;
  --ta-input-bg:        #FFFFFF;
  --ta-input-border:    rgba(13, 148, 136, 0.35);
  --ta-input-text:      #16201E;
  --ta-btn-text:        #FFFFFF;
  --ta-btn-glow:        0 8px 24px rgba(13, 148, 136, 0.25);
  --ta-btn-outline-text: var(--ta-accent-dark);
  --ta-bubble-fill:     #FFFFFF;
  --ta-bubble-text:     var(--ta-accent-dark);
  --ta-shadow-card:     0 1px 2px rgba(20, 40, 38, 0.05), 0 8px 24px rgba(20, 40, 38, 0.07);
  --ta-hero-glow:       0 10px 30px rgba(13, 148, 136, 0.20);
  --ta-surface:         #FFFFFF;
  --ta-surface-2:        #FAFAF8;
  --ta-text:            #16201E;
  --ta-input:           #FFFFFF;
  --ta-header-bg:       rgba(250, 250, 248, 0.96);
  --ta-topbar-bg:       #EDEBE5;
  --ta-footer-bg:       #EDEBE5;
  --ta-sidebar-bg:      #FFFFFF;
}