/* ============================================================
   ETFPlaner — tokens.css
   Drei Ebenen: Basis → semantisch → Komponente.
   REGEL: In components/layout/pages.css steht kein Hex-Wert —
   nur var(--…). Dark Mode: die dunklen Werte stehen in ZWEI
   Blöcken direkt untereinander (Media-Query + data-theme) und
   MÜSSEN synchron gehalten werden.
   Breakpoints (mobile-first, min-width): 640px · 1024px · 1280px
   ============================================================ */

:root {
  /* ---- 1. Basis-Tokens (Rohwerte, kein Kontext) ---- */
  --color-slate-50:#f8fafc; --color-slate-100:#f1f5f9; --color-slate-150:#eef2f7;
  --color-slate-200:#e2e8f0; --color-slate-300:#cbd5e1; --color-slate-400:#94a3b8;
  --color-slate-500:#64748b; --color-slate-600:#475569; --color-slate-700:#334155;
  --color-slate-900:#0f172a;
  --color-blue-100:#dbeafe; --color-blue-200:#bfdbfe; --color-blue-400:#60a5fa;
  --color-blue-500:#3b82f6; --color-blue-600:#2563eb; --color-blue-700:#1d4ed8;
  --color-green-100:#ecfdf5; --color-green-200:#a7f3d0; --color-green-600:#047857; --color-green-400:#34d399;
  --color-red-100:#fef2f2; --color-red-200:#fecaca; --color-red-600:#b91c1c; --color-red-400:#f87171;
  --color-amber-50:#fffbeb; --color-amber-100:#fef3c7; --color-amber-300:#fcd34d;
  --color-amber-500:#d97706; --color-amber-700:#b45309; --color-amber-400:#fbbf24;

  /* ---- 2. Semantische Tokens (nur diese in Komponenten) ---- */
  /* Kontraste auf --surface-card geprüft:
     text-primary 17,8:1 · text-secondary 10,4:1 · text-muted 7,0:1
     accent-text 6,3:1 (Links/kleine Texte) · accent 4,6:1 (nur Flächen/große Schrift) */
  --surface-page:var(--color-slate-50);
  --surface-card:#ffffff;
  --surface-raised:var(--color-slate-100);
  --surface-sunken:var(--color-slate-150);
  --text-primary:var(--color-slate-900);
  --text-secondary:var(--color-slate-700);
  --text-muted:var(--color-slate-600);
  --text-on-accent:#ffffff;
  --border-subtle:var(--color-slate-200);
  --border-strong:var(--color-slate-300);
  --border-focus:var(--color-blue-700);
  --accent:var(--color-blue-600);
  --accent-hover:var(--color-blue-700);
  --accent-soft:var(--color-blue-100);
  --accent-text:var(--color-blue-700);
  --state-positive:var(--color-green-600);
  --state-positive-soft:var(--color-green-100);
  --state-positive-border:var(--color-green-200);
  --state-negative:var(--color-red-600);
  --state-negative-soft:var(--color-red-100);
  --state-negative-border:var(--color-red-200);
  --state-warning:var(--color-amber-700);
  --state-warning-fill:var(--color-amber-500);
  --state-warning-soft:var(--color-amber-50);
  --state-warning-border:var(--color-amber-300);
  --state-info:var(--color-blue-700);

  /* Diagramme — dashboard.js liest diese per getComputedStyle */
  --chart-target:var(--color-slate-900);   /* Zielpfad (Soll) */
  --chart-current:var(--color-blue-600);   /* Ist + Projektion (gestrichelt) */
  --chart-invested:var(--color-slate-500);
  --chart-optimistic:var(--color-green-600);
  --chart-pessimistic:var(--color-red-600);
  --chart-grid:#e8edf4;
  --chart-axis:var(--color-slate-600);
  --chart-today:var(--color-slate-400);

  /* ---- Abstände: 4-px-Raster ---- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px; --space-24:96px;

  /* ---- Radien: Datenflächen klein, Marketing größer ---- */
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:24px; --radius-full:999px;

  /* ---- Typografie (fluide Skala als Token) ---- */
  --font-sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:ui-monospace,'IBM Plex Mono',Menlo,monospace;
  --text-xs:0.75rem;    /* 12px — nur Fußnoten, Kontrast >= text-muted */
  --text-sm:0.875rem;   /* 14px — Hilfstexte, min. --text-muted */
  --text-base:1rem;     /* 16px — Fließtext-Minimum */
  --text-lg:1.125rem;
  --text-xl:clamp(1.25rem,1.1rem + .6vw,1.5rem);
  --text-2xl:clamp(1.5rem,1.3rem + .9vw,2rem);
  --text-3xl:clamp(1.75rem,1.5rem + 1.2vw,2.25rem);
  --text-display:clamp(2.25rem,1.8rem + 2vw,3.5rem); /* max ~3.5rem, lh >= 1.05, ls >= -0.02em */
  --leading-tight:1.15; --leading-snug:1.3; --leading-normal:1.55;

  /* ---- Schatten & Fokus ---- */
  --shadow-card:0 1px 3px rgba(15,23,42,.06);
  --shadow-raised:0 8px 24px rgba(15,23,42,.10);
  --shadow-float:0 16px 44px rgba(15,23,42,.07);
  /* Marke aus dem Handoff: blaues Plaettchen, helle Linie. */
  --brand-mark-bg:#3b5be0; --brand-mark-fg:#ffffff;
  --brand-word:#0f172a; --brand-word-domain:#64748b;
  --focus-ring:0 0 0 2px var(--surface-card),0 0 0 4px var(--border-focus);

  /* ---- 3. Komponenten-Tokens (nur echte Abweichungen) ---- */
  --button-primary-bg:var(--accent);
  --button-primary-bg-hover:var(--accent-hover);
  --card-radius:var(--radius-lg);
  --table-row-border:var(--color-slate-150);
}

/* ============================================================
   DARK MODE — dieselbe Deklarationsliste ZWEIMAL, direkt
   untereinander. Jede Änderung in BEIDEN Blöcken nachziehen!
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-page:#0b1220; --surface-card:#101a2e; --surface-raised:#131f36; --surface-sunken:#0e1729;
    --text-primary:#f1f5fb; --text-secondary:#c3cede; --text-muted:#a6b4c8; --text-on-accent:#0b1220;
    --border-subtle:#22304a; --border-strong:#33456a; --border-focus:#60a5fa;
    --accent:#3b82f6; --accent-hover:#60a5fa; --accent-soft:#1d3a6b; --accent-text:#8ab8ff;
    --state-positive:#34d399; --state-positive-soft:#0c2a20; --state-positive-border:#1d5c46;
    --state-negative:#f87171; --state-negative-soft:#2b1214; --state-negative-border:#7a2e2e;
    --state-warning:#fbbf24; --state-warning-fill:#f59e0b; --state-warning-soft:#2b2410; --state-warning-border:#8a6a1f;
    --chart-target:#e6edf7; --chart-current:#60a5fa; --chart-invested:#8093ab;
    --chart-optimistic:#34d399; --chart-pessimistic:#f87171;
    --chart-grid:#22304a; --chart-axis:#a6b4c8; --chart-today:#556784;
    --shadow-card:0 1px 3px rgba(0,0,0,.4); --shadow-raised:0 8px 24px rgba(0,0,0,.5);
    --shadow-float:0 16px 44px rgba(0,0,0,.34);
    --brand-mark-bg:#6e8bf0; --brand-mark-fg:#0b1220;
    --brand-word:#f8fafc; --brand-word-domain:#94a3b8;
  }
}
:root[data-theme="dark"] {
  --surface-page:#0b1220; --surface-card:#101a2e; --surface-raised:#131f36; --surface-sunken:#0e1729;
  --text-primary:#f1f5fb; --text-secondary:#c3cede; --text-muted:#a6b4c8; --text-on-accent:#0b1220;
  --border-subtle:#22304a; --border-strong:#33456a; --border-focus:#60a5fa;
  --accent:#3b82f6; --accent-hover:#60a5fa; --accent-soft:#1d3a6b; --accent-text:#8ab8ff;
  --state-positive:#34d399; --state-positive-soft:#0c2a20; --state-positive-border:#1d5c46;
  --state-negative:#f87171; --state-negative-soft:#2b1214; --state-negative-border:#7a2e2e;
  --state-warning:#fbbf24; --state-warning-fill:#f59e0b; --state-warning-soft:#2b2410; --state-warning-border:#8a6a1f;
  --chart-target:#e6edf7; --chart-current:#60a5fa; --chart-invested:#8093ab;
  --chart-optimistic:#34d399; --chart-pessimistic:#f87171;
  --chart-grid:#22304a; --chart-axis:#a6b4c8; --chart-today:#556784;
  --shadow-card:0 1px 3px rgba(0,0,0,.4); --shadow-raised:0 8px 24px rgba(0,0,0,.5);
    --shadow-float:0 16px 44px rgba(0,0,0,.34);
    --brand-mark-bg:#6e8bf0; --brand-mark-fg:#0b1220;
    --brand-word:#f8fafc; --brand-word-domain:#94a3b8;
}

/* ============================================================
   FARBSCHEMA
   Ohne diese Angabe rendern Formularelemente und Scrollbalken im
   Dunkelmodus weiter hell.
   ============================================================ */
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

/* ============================================================
   SEITENTOKENS — Hero und Beispielpanel
   Das Beispielpanel folgt jetzt dem Thema: hell im hellen Modus,
   dunkel im dunklen. Alle Flaechen, Linien und Schriften darin
   kommen aus dieser Gruppe; in den Regeln steht kein Rohwert mehr.
   Der Block hier ist die HELLE Fassung, die dunkle steht weiter
   unten in denselben zwei Bloecken wie die uebrigen Farben.
   ============================================================ */
:root {
  --hero-dark-a: #f8fafc;
  --hero-dark-b: #eef2f9;
  --hero-deep-a: #ffffff;
  --hero-deep-b: #f2f6fd;
  --hero-deep-c: #e7eefb;
  --hero-deep-d: #f8fafc;
  --hero-surface-a: #ffffff;
  --hero-surface-b: #f1f5f9;

  --hero-text: #0f172a;
  --hero-text-muted: #4a5a70;
  --hero-accent: #2563eb;
  --hero-accent-strong: #1d4ed8;

  --hero-grid: rgba(15, 23, 42, .13);
  --hero-line: rgba(15, 23, 42, .12);
  --hero-line-soft: rgba(15, 23, 42, .08);
  --hero-card: rgba(255, 255, 255, .74);
  --hero-card-border: rgba(15, 23, 42, .12);
  --hero-chip: rgba(255, 255, 255, .92);
  --hero-panel-a: rgba(255, 255, 255, .78);
  --hero-panel-b: rgba(255, 255, 255, .58);
  --hero-inset: rgba(255, 255, 255, .9);
  --hero-sheen: rgba(15, 23, 42, .035);
  --hero-glow: rgba(37, 99, 235, .16);
  --hero-wash-a: rgba(37, 99, 235, .13);
  --hero-wash-b: rgba(96, 165, 250, .10);
  --hero-shadow: 0 34px 110px rgba(15, 23, 42, .12);
  --hero-shadow-inner: 0 24px 66px rgba(15, 23, 42, .08);
  --hero-bar: rgba(37, 99, 235, .16);
  --hero-invested: rgba(71, 85, 105, .72);
  --hero-marker-ring: rgba(37, 99, 235, .16);
  --hero-negative: #b3261e;
  --hero-negative-soft: rgba(179, 38, 30, .10);
  --hero-negative-line: rgba(179, 38, 30, .26);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hero-dark-a: #0b1222; --hero-dark-b: #172033;
    --hero-deep-a: #050b18; --hero-deep-b: #0b1222;
    --hero-deep-c: #111c32; --hero-deep-d: #08111f;
    --hero-surface-a: #0f172a; --hero-surface-b: #1e293b;
    --hero-text: #ffffff; --hero-text-muted: #cbd5e1;
    --hero-accent: #60a5fa; --hero-accent-strong: #3b82f6;
    --hero-grid: rgba(203, 213, 225, .18);
    --hero-line: rgba(255, 255, 255, .18);
    --hero-line-soft: rgba(255, 255, 255, .14);
    --hero-card: rgba(255, 255, 255, .10);
    --hero-card-border: rgba(255, 255, 255, .18);
    --hero-chip: rgba(15, 23, 42, .58);
    --hero-panel-a: rgba(255, 255, 255, .105);
    --hero-panel-b: rgba(255, 255, 255, .045);
    --hero-inset: rgba(255, 255, 255, .08);
    --hero-sheen: rgba(255, 255, 255, .07);
    --hero-glow: rgba(37, 99, 235, .42);
    --hero-wash-a: rgba(37, 99, 235, .78);
    --hero-wash-b: rgba(96, 165, 250, .22);
    --hero-shadow: 0 34px 110px rgba(15, 23, 42, .22);
    --hero-shadow-inner: 0 24px 66px rgba(0, 0, 0, .20);
    --hero-bar: rgba(147, 197, 253, .20);
    --hero-invested: rgba(148, 163, 184, .88);
    --hero-marker-ring: rgba(255, 255, 255, .15);
    --hero-negative: #fecaca;
    --hero-negative-soft: rgba(248, 113, 113, .14);
    --hero-negative-line: rgba(248, 113, 113, .28);
  }
}
:root[data-theme="dark"] {
  --hero-dark-a: #0b1222; --hero-dark-b: #172033;
  --hero-deep-a: #050b18; --hero-deep-b: #0b1222;
  --hero-deep-c: #111c32; --hero-deep-d: #08111f;
  --hero-surface-a: #0f172a; --hero-surface-b: #1e293b;
  --hero-text: #ffffff; --hero-text-muted: #cbd5e1;
  --hero-accent: #60a5fa; --hero-accent-strong: #3b82f6;
  --hero-grid: rgba(203, 213, 225, .18);
  --hero-line: rgba(255, 255, 255, .18);
  --hero-line-soft: rgba(255, 255, 255, .14);
  --hero-card: rgba(255, 255, 255, .10);
  --hero-card-border: rgba(255, 255, 255, .18);
  --hero-chip: rgba(15, 23, 42, .58);
  --hero-panel-a: rgba(255, 255, 255, .105);
  --hero-panel-b: rgba(255, 255, 255, .045);
  --hero-inset: rgba(255, 255, 255, .08);
  --hero-sheen: rgba(255, 255, 255, .07);
  --hero-glow: rgba(37, 99, 235, .42);
  --hero-wash-a: rgba(37, 99, 235, .78);
  --hero-wash-b: rgba(96, 165, 250, .22);
  --hero-shadow: 0 34px 110px rgba(15, 23, 42, .22);
  --hero-shadow-inner: 0 24px 66px rgba(0, 0, 0, .20);
  --hero-bar: rgba(147, 197, 253, .20);
  --hero-invested: rgba(148, 163, 184, .88);
  --hero-marker-ring: rgba(255, 255, 255, .15);
  --hero-negative: #fecaca;
  --hero-negative-soft: rgba(248, 113, 113, .14);
  --hero-negative-line: rgba(248, 113, 113, .28);
}

/* Grundfläche und Schrift des Dokuments. */
:root {
  font-family: var(--font-sans);
  background: var(--surface-page);
  color: var(--text-primary);
}