/* finance-stack — styles split (Phase 46 Wave 4)
   Datei: base.css  •  Lade-Position: 1/6 — Reset, Palette, Tokens, Dark-Mode-Defaults
   Lade-Reihenfolge: base → layout-shell → components → pages → charts-hero → polish
*/

/* === Finance Stack === */
* { box-sizing: border-box; }

/* === Brand-Palette: Banking (Indigo / Slate / Amber) === */
:root {
  /* Flächen + Hintergrund */
  --bg: #f6f7fa;
  --surface: #ffffff;
  --surface-2: #eef0f4;
  --surface-3: #f5f6f9;
  --surface-4: #ecedf2;

  /* Text */
  --text: #0f1729;
  --text-muted: #5b6378;
  --text-dim: #7f8699;
  --text-code: #2a3147;
  --text-disabled: #b8bcc7;

  /* Akzent (Indigo) + Akzent-Hintergrund */
  --accent: #4f46e5;
  --accent-h: #4338ca;
  --accent-bg: #eef0ff;
  --accent-bg-h: #e0e3ff;

  /* Sekundärer Warm-Akzent (Amber) — für Highlights, Wallet-bezogene Elemente */
  --accent-2: #d97706;
  --accent-2-bg: #fef3e6;

  /* Chart-Warm (Phase 33, CONTRACT-UI-01, D-07b) — Orange-Palette für Vertragsbelastung-Chart */
  --chart-warm: var(--accent-2);
  --chart-warm-soft: #fdba74;

  /* Pill-Tokens (Phase 33, CONTRACT-UI-03) — Status-Pills im Pool-Tile */
  --pill-success-bg: #d1fae5;
  --pill-success-text: #047857;
  --pill-neutral-bg: var(--surface-2);
  --pill-neutral-text: var(--text-muted);

  /* Status-Farben */
  --danger: #b91c1c;
  --neg: #b91c1c;
  --pos: #15803d;

  /* Borders */
  --border: #e4e6ec;
  --border-2: #eef0f4;
  --border-3: #e9eaef;
  --border-input: #d6d8e0;

  /* Nav + Header */
  --nav-hover: #eef0f4;
  --nav-active-bg: #0f1729;
  --nav-active-text: #ffffff;
  --header-bg: rgba(255,255,255,.94);

  /* Flash / Error */
  --flash-bg: #e6f5ec;
  --flash-border: #b6dec0;
  --flash-text: #15803d;
  --error-bg: #fde6e6;
  --error-text: #b91c1c;

  /* Vorschlags-Akzent (warmer Highlight, dezent) */
  --suggest-border: #f1d49a;
  --suggest-grad: #fef5e1;

  /* === Chart-Tokens (theme-aware, ersetzen hardcoded #f7931a) === */
  --chart-line: var(--accent-2);
  --chart-area: var(--accent-2);
  --chart-area-opacity: .12;
  --chart-grid: var(--border);
  --chart-forecast: var(--accent-2);
  --chart-positive: var(--pos);
  --chart-negative: var(--neg);

  --shadow: 0 1px 2px rgba(15, 23, 41, .06);
}

/* ============================================================
   Design Tokens — palette-unabhängig (Spacing / Type / Radius / Shadow / Motion)
   Move 1 (v14.0 Design-Foundation): Implizites Design-System explizit gemacht.
   Komponenten sollten ab hier nur noch über var(--space-*), var(--text-*),
   var(--r-*), var(--shadow-*), var(--z-*), var(--ease-*) zugreifen.
   ============================================================ */
:root {
  /* Spacing-Scale — 4px-Basis, geometrische Progression */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;

  /* Type-Scale — rem-basiert, 1rem = 16px Body */
  --text-xs:   0.75rem;    /* 12 — Pills, Captions, Day-Header */
  --text-sm:   0.8125rem;  /* 13 — Tabellen-Header, Sub-Labels */
  --text-base: 0.9375rem;  /* 15 — Body Default (matches existing 15px) */
  --text-md:   1rem;       /* 16 — Section-Titles */
  --text-lg:   1.125rem;   /* 18 — Card-Titles, Modal-Headlines */
  --text-xl:   1.25rem;    /* 20 — Page-Headings */
  --text-2xl:  1.5rem;     /* 24 — Hero-Amount */
  --text-3xl:  1.75rem;    /* 28 — Display-Amount */

  /* Line-Heights */
  --leading-tight:   1.25;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  /* Font-Weights — semantische Aliase */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  /* Border-Radius-Scale */
  --r-sm:   6px;     /* Buttons, kleine Tags */
  --r-md:   10px;    /* Inputs, mittlere Container */
  --r-lg:   14px;    /* Cards, Tiles */
  --r-xl:   20px;    /* Hero-Cards, Sheet-Top */
  --r-2xl:  28px;    /* Large Sheets */
  --r-pill: 999px;   /* Status-Pills, runde Buttons */

  /* Elevation-Scale — Light-Mode optimiert (Dark überschreibt unten) */
  --shadow-1: 0 1px 2px rgba(15, 23, 41, .06);
  --shadow-2: 0 2px 8px rgba(15, 23, 41, .08);
  --shadow-3: 0 8px 24px -4px rgba(15, 23, 41, .12);
  --shadow-4: 0 24px 48px -8px rgba(15, 23, 41, .18);

  /* Z-Index-Scale — vermeidet Magic-Stack */
  --z-base:    1;
  --z-sticky:  10;
  --z-overlay: 30;
  --z-modal:   50;
  --z-toast:   70;
  --z-toast-top: 90;

  /* Motion */
  --ease-out:      cubic-bezier(.16, 1, .3, 1);
  --ease-in-out:   cubic-bezier(.4, 0, .2, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  /* Layout-Konstanten */
  --tabbar-h: 64px;  /* Mobile Bottom-Tab-Bar Höhe (Move 2) */
}

/* Dark-Mode: Shadow-Stack mit höherer Opacity, sonst zu unsichtbar */
[data-theme="dark"] {
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .25);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, .35);
  --shadow-3: 0 8px 24px -4px rgba(0, 0, 0, .50);
  --shadow-4: 0 24px 48px -8px rgba(0, 0, 0, .65);
}

/* Reduced-Motion Override — A11y-Default */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 1ms;
    --duration-base: 1ms;
    --duration-slow: 1ms;
  }
}

[data-theme="dark"] {
  --bg: #0b1020;
  --surface: #141a2e;
  --surface-2: #1c2440;
  --surface-3: #18203a;
  --surface-4: #202a48;

  --text: #e5e7f0;
  --text-muted: #98a0b8;
  --text-dim: #7c849c;
  --text-code: #cdd2e0;
  --text-disabled: #4f5675;

  --accent: #818cf8;
  --accent-h: #a5b1ff;
  --accent-bg: #1c2148;
  --accent-bg-h: #232a58;

  --accent-2: #fbbf24;
  --accent-2-bg: #2a2110;

  /* Chart-Warm Dark (FIX-05 v2, UAT 2026-05-22) — Amber-Shade-Familie: */
  /* Base Amber-400 (#fbbf24) + sehr heller Amber-100 (#fef3c7). Gleiche Hue, */
  /* großer Lightness-Drift (~35%). Vermeidet Hue-Mischung in Stacked-Column-Charts. */
  --chart-warm: var(--accent-2);
  --chart-warm-soft: #fef3c7;

  /* Pill-Tokens Dark */
  --pill-success-bg: #064e3b;
  --pill-success-text: #6ee7b7;
  --pill-neutral-bg: var(--surface-2);
  --pill-neutral-text: var(--text-muted);

  --danger: #f87171;
  --neg: #f87171;
  --pos: #4ade80;

  --border: #283153;
  --border-2: #1f2746;
  --border-3: #232c4e;
  --border-input: #354064;

  --nav-hover: #1f2746;
  --nav-active-bg: #e5e7f0;
  --nav-active-text: #0b1020;
  --header-bg: rgba(20,26,46,.94);

  --flash-bg: #122a1c;
  --flash-border: #1f4d2e;
  --flash-text: #6dd49a;
  --error-bg: #2c1414;
  --error-text: #fca5a5;

  --suggest-border: #5a4820;
  --suggest-grad: #2a2212;

  --shadow: 0 2px 6px rgba(0, 0, 0, .35);
}

/* ============================================================
   Alternative Light-Paletten (override via :root[data-palette-light="…"])
   ============================================================ */

/* — Warm Cream — Creme-Basis, Terracotta-Akzent */
:root[data-palette-light="warm-cream"] {
  --bg: #faf6f0;
  --surface: #ffffff;
  --surface-2: #f0eadf;
  --surface-3: #f6f0e4;
  --surface-4: #ede5d6;
  --text: #2b2117;
  --text-muted: #6e5e4c;
  --text-dim: #968570;
  --text-code: #3d2f20;
  --accent: #c2410c;
  --accent-h: #9a3412;
  --accent-bg: #ffeadd;
  --accent-bg-h: #ffdbc2;
  --accent-2: #047857;
  --accent-2-bg: #d5ebde;
  --danger: #991b1b;
  --neg: #991b1b;
  --pos: #15803d;
  --border: #e2d6c2;
  --border-2: #ede2cd;
  --border-3: #e8dcc6;
  --border-input: #d4c5ab;
  --nav-hover: #efe6d6;
  --nav-active-bg: #2b2117;
  --header-bg: rgba(255,253,250,.94);
}

/* — Forest — Off-White, Emerald-Akzent */
:root[data-palette-light="forest"] {
  --bg: #f3f5f1;
  --surface: #ffffff;
  --surface-2: #e7ebe2;
  --surface-3: #eef2e9;
  --surface-4: #dde3d4;
  --text: #1a2922;
  --text-muted: #586a5b;
  --text-dim: #7e8e7e;
  --text-code: #2f4036;
  --accent: #047857;
  --accent-h: #065f46;
  --accent-bg: #d5ebde;
  --accent-bg-h: #bcdec9;
  --accent-2: #b45309;
  --accent-2-bg: #fbedd0;
  --danger: #b91c1c;
  --neg: #b91c1c;
  --pos: #15803d;
  --border: #d5dccc;
  --border-2: #e2e7d6;
  --border-3: #dee4d0;
  --border-input: #b8c1a6;
  --nav-hover: #e2e7d6;
  --nav-active-bg: #1a2922;
  --header-bg: rgba(255,255,254,.94);
}

/* — Mono — Reine Grautöne, Charcoal als Akzent */
:root[data-palette-light="mono"] {
  --bg: #f5f5f5;
  --surface: #ffffff;
  --surface-2: #ebebeb;
  --surface-3: #f0f0f0;
  --surface-4: #e2e2e2;
  --text: #1a1a1a;
  --text-muted: #6b6b6b;
  --text-dim: #9e9e9e;
  --text-code: #404040;
  --accent: #1a1a1a;
  --accent-h: #333333;
  --accent-bg: #e8e8e8;
  --accent-bg-h: #d8d8d8;
  --accent-2: #525252;
  --accent-2-bg: #ebebeb;
  --danger: #991b1b;
  --neg: #991b1b;
  --pos: #166534;
  --border: #e0e0e0;
  --border-2: #ebebeb;
  --border-3: #e6e6e6;
  --border-input: #cccccc;
  --nav-hover: #e8e8e8;
  --nav-active-bg: #1a1a1a;
  --header-bg: rgba(255,255,255,.94);
}

/* ============================================================
   Alternative Dark-Paletten (override via [data-theme="dark"][data-palette-dark="…"])
   ============================================================ */

/* — Midnight — Fast-Schwarz, Cyan-Akzent */
[data-theme="dark"][data-palette-dark="midnight"] {
  --bg: #050810;
  --surface: #0d1320;
  --surface-2: #141c2e;
  --surface-3: #101724;
  --surface-4: #182238;
  --text: #e2e8f0;
  --text-muted: #7c8aa3;
  --text-dim: #5d6a82;
  --text-code: #b8c2d4;
  --accent: #22d3ee;
  --accent-h: #67e8f9;
  --accent-bg: #0c2530;
  --accent-bg-h: #133140;
  --accent-2: #fcd34d;
  --accent-2-bg: #2b1f08;
  --danger: #fb7185;
  --neg: #fb7185;
  --pos: #34d399;
  --border: #1f2937;
  --border-2: #18212f;
  --border-3: #1a2333;
  --border-input: #2d3b50;
  --nav-hover: #18212f;
  --nav-active-bg: #e2e8f0;
  --nav-active-text: #050810;
  --header-bg: rgba(13,19,32,.94);
}

/* — Espresso — Warm-Braun, Amber-Akzent */
[data-theme="dark"][data-palette-dark="espresso"] {
  --bg: #1a120a;
  --surface: #2a1d10;
  --surface-2: #3a2a18;
  --surface-3: #2f2113;
  --surface-4: #41311e;
  --text: #f5ead0;
  --text-muted: #b0987a;
  --text-dim: #8a7660;
  --text-code: #d8c8a8;
  --accent: #f59e0b;
  --accent-h: #fbbf24;
  --accent-bg: #3a2a10;
  --accent-bg-h: #4a3613;
  --accent-2: #84cc16;
  --accent-2-bg: #1e2410;
  --danger: #fb923c;
  --neg: #fb923c;
  --pos: #84cc16;
  --border: #4a3826;
  --border-2: #3a2a18;
  --border-3: #422f1c;
  --border-input: #5c462c;
  --nav-hover: #3a2a18;
  --nav-active-bg: #f5ead0;
  --nav-active-text: #1a120a;
  --header-bg: rgba(42,29,16,.94);
}

/* — Pure OLED — Reines Schwarz */
[data-theme="dark"][data-palette-dark="pure"] {
  --bg: #000000;
  --surface: #0a0a0a;
  --surface-2: #161616;
  --surface-3: #111111;
  --surface-4: #1c1c1c;
  --text: #f5f5f5;
  --text-muted: #a3a3a3;
  --text-dim: #737373;
  --text-code: #d4d4d4;
  --accent: #e5e5e5;
  --accent-h: #ffffff;
  --accent-bg: #1f1f1f;
  --accent-bg-h: #2a2a2a;
  --accent-2: #fbbf24;
  --accent-2-bg: #1f1810;
  --danger: #f87171;
  --neg: #f87171;
  --pos: #4ade80;
  --border: #262626;
  --border-2: #1a1a1a;
  --border-3: #202020;
  --border-input: #404040;
  --nav-hover: #1a1a1a;
  --nav-active-bg: #f5f5f5;
  --nav-active-text: #000000;
  --header-bg: rgba(10,10,10,.94);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  margin: 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.45;
}

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
  /* 2026-05-30: Phantom-Horizontal-Scroll-Guard. Das Hero-v3-Legenden-Tooltip
     (::after, position:absolute, bis 260px, opacity:0) blieb im Layout und
     blähte die scrollWidth über die Viewport-Breite → „schwammiges" seitliches
     Rubber-Band-Scrollen auf dem Dashboard. `clip` kappt nur die X-Achse am
     main-Border (Viewport-Kante), lässt Y sichtbar (Tooltips/Sticky bleiben
     intakt — anders als `hidden`, das einen Scroll-Container erzwingen würde).
     Tabellen scrollen über eigene .table-scroll-wrap-Container, unberührt. */
  overflow-x: clip;
}