/* ============================================================
   Phase 2b.10 — Awwwards Visual Reset
   Design-Token-System (Foundation)
   ============================================================
   Skills appliziert:
   - top-design: Every pixel intentional, motion creates emotion
   - refactoring-ui: Constrained scales for spacing/type/color
   - microinteractions: 100ms feedback rule
   - web-typography: Inter as workhorse, dramatic display scale
   - ux-heuristics: Don't make me think
   ============================================================ */

:root,
:root[data-theme="dark"] {
    /* Brand-Color-Hierarchie (Sweep 2d.5.7.1 — Logo-Range, cool-blau ohne Violett-Stich):
       - brand-deep    = Tiefer BG-Verlauf (Glass-Cards, Bulk-Bar Bottom)
       - brand-primary = Hauptfarbe für aktive Buttons, Tab-Underlines,
                         Counter-Werte, dynamische Hero-Werte
       - brand-mid     = Sekundäre Akzente: Hover-States, Sidebar-Active-
                         Item, Pills-Active, Filter-Active
       - brand-light   = Highlights, Glows, Top-Bar-Credit-Icon,
                         Focus-Ring, dezente Border-Hints
       Alle Töne sind cool-blau ohne Violett-Stich. KEIN Lila erlaubt. */
    --color-brand-primary: #2a34b0;
    --color-brand-deep: #1a2670;
    --color-brand-mid: #4f7edb;
    --color-brand-end: #000000;
    --gradient-brand: linear-gradient(160deg, #2a34b0 0%, #000000 100%);

    /* Surface — Phase 2b.12: Glass-Morphism. Pures Schwarz-Base mit
       semi-transparenten Cards. Aurora-Atmosphaere uebernimmt das Drama. */
    --color-bg-base: #0a0a0a;
    --color-bg-elevated: #141414;
    --color-bg-card: rgba(20, 20, 22, 0.5);
    --color-bg-hover: rgba(28, 28, 30, 0.7);
    /* Solid-Fallbacks fuer Komponenten die Transparenz nicht vertragen */
    --color-bg-card-solid: #141416;
    --color-bg-hover-solid: #1c1c1f;

    /* Text — strict pures Weiss + alpha-Stufen (kein Grau-Tinge mehr).
       Phase 2b.13: Lesbarkeits-Pump (Secondary 0.7->0.82, Muted 0.4->0.55).
       Sweep 2d.5.8.4 Etappe 2: Hierarchie geschärft um eine vierte
       Stufe (tertiary) — vorher muted=0.55 wurde fuer alles benutzt
       was nicht primary/secondary war, was viele Stellen unter
       WCAG-AA fallen liess. Jetzt:
         primary    — Hauptfliesstext, max Lesbarkeit
         secondary  — Sekundaer-Info (Sub-Titles, Cost-Aufschluesselung)
         tertiary   — dezent-aber-LESBAR (Hints, Worst-Case-Suffix)
         muted      — sehr dezent (Form-Footer, Optional-Hinweise)
         disabled   — disabled-Texte
         subtle     — kaum wahrnehmbar (Skeleton-Placeholder o.ae.) */
    --color-text-primary: #ffffff;
    --color-text-secondary: rgba(255, 255, 255, 0.82);
    --color-text-tertiary: rgba(255, 255, 255, 0.70);
    --color-text-muted: rgba(255, 255, 255, 0.55);
    --color-text-disabled: rgba(255, 255, 255, 0.40);
    --color-text-subtle: rgba(255, 255, 255, 0.35);

    /* Border — Glass-Stufen (immer ueber alpha definiert) */
    --color-border: rgba(255, 255, 255, 0.06);
    --color-border-strong: rgba(255, 255, 255, 0.1);
    --color-border-glass: rgba(255, 255, 255, 0.06);
    --color-border-glass-strong: rgba(255, 255, 255, 0.1);

    /* Brand-Light fuer Accent-Glows (Hellblau-Cyan aus Logo-Range).
       Sweep 2d.5.7: war Lila 6c75e0 — dann Tailwind-Blau-500.
       Sweep 2d.5.7.1: Logo-Hellblau-Cyan #7ab8f0. */
    --color-brand-light: #7ab8f0;

    /* Brand-Glow-Tokens (Logo-Range) */
    --color-brand-glow: rgba(42, 52, 176, 0.35);
    --color-brand-glow-light: rgba(122, 184, 240, 0.35);

    /* Aurora-Layer-Tokens fuer Page-Background.
       Phase 2b.13: Pump (0.35->0.55) damit auf jedem Monitor sichtbar.
       Sweep 2d.5.7.1: aurora-secondary auf Logo-Hellblau (war 59,130,246). */
    --aurora-primary: rgba(42, 52, 176, 0.55);
    --aurora-secondary: rgba(122, 184, 240, 0.42);
    --aurora-tertiary: rgba(80, 90, 200, 0.32);

    /* Accent (sparsam) */
    --color-accent-gold: #eab107;
    --color-accent-gold-soft: #eab10733;
    --color-accent-gold-deep: #b88806;

    /* Semantic */
    --color-success: #22c55e;
    --color-success-soft: #22c55e22;
    --color-warning: #f59e0b;
    --color-warning-soft: #f59e0b22;
    --color-danger: #ef4444;
    --color-danger-soft: #ef444422;
    --color-info: #4f7edb;
    --color-info-soft: #4f7edb22;

    /* 2d.4 Etappe 1: Status-Card-Tokens (Mike-Frust: Fehler dunkel-auf-dunkel
       unlesbar). Der Trick: HELLER Text auf transparent-rotem BG — nicht
       weisser Text auf saturiertem Rot, sondern soft-Tint mit pastel Text. */
    --status-error-bg: rgba(239, 68, 68, 0.12);
    --status-error-border: rgba(239, 68, 68, 0.50);
    --status-error-text: rgba(255, 220, 220, 0.95);
    --status-error-icon: #fca5a5;
    --status-warn-bg: rgba(245, 158, 11, 0.12);
    --status-warn-border: rgba(245, 158, 11, 0.50);
    --status-warn-text: rgba(255, 235, 200, 0.95);
    --status-warn-icon: #fbbf24;
    --status-success-bg: rgba(34, 197, 94, 0.12);
    --status-success-border: rgba(34, 197, 94, 0.50);
    --status-success-text: rgba(220, 255, 230, 0.95);
    --status-success-icon: #86efac;
    --status-info-bg: rgba(99, 102, 241, 0.12);
    --status-info-border: rgba(99, 102, 241, 0.50);
    --status-info-text: rgba(220, 225, 255, 0.95);
    --status-info-icon: #a5b4fc;

    /* Sweep 2d.5.7.c.1.2 Etappe 2: Kontakt-Icon-Tokens (Lead-Uebersicht
       als Master). Inactive: glass + text-muted. Active: brand-mid-tint
       BG + brand-light Icon. Gilt fuer Pulse-Data-Table, Lead-Pool-
       Tabelle, Verify-Tabelle gleichermassen. */
    --contact-icon-bg-inactive:  rgba(255, 255, 255, 0.03);
    --contact-icon-fg-inactive:  rgba(255, 255, 255, 0.32);
    --contact-icon-border:       rgba(255, 255, 255, 0.06);
    --contact-icon-bg-active:    rgba(79, 126, 219, 0.10);
    --contact-icon-fg-active:    var(--color-brand-light);
    --contact-icon-border-active: rgba(79, 126, 219, 0.42);
    --contact-icon-bg-hover:     rgba(42, 52, 176, 0.16);
    --contact-icon-fg-hover:     var(--color-brand-primary);
    --contact-icon-border-hover: rgba(42, 52, 176, 0.60);

    /* Sweep 2d.5.7.c Etappe 2: Status-Pill-Color-Mapping fuer
       .pulse-data-table + .pulse-status-pill. Werte aus Lead-Uebersicht-
       Tabelle uebernommen (visuelle Identitaet bei Pattern-Aktivierung). */
    --status-color-verified-bg:     rgba(34, 197, 94, 0.18);
    --status-color-verified-fg:     #86efac;
    --status-color-pruefen-bg:      rgba(245, 158, 11, 0.18);
    --status-color-pruefen-fg:      #fbbf24;
    --status-color-kein-link-bg:    rgba(255, 255, 255, 0.08);
    --status-color-kein-link-fg:    rgba(255, 255, 255, 0.65);
    --status-color-disqualified-bg: rgba(239, 68, 68, 0.18);
    --status-color-disqualified-fg: #fca5a5;
    --status-color-offen-bg:        rgba(42, 52, 176, 0.22);
    --status-color-offen-fg:        var(--color-brand-light);
    --status-color-neu-bg:          rgba(79, 126, 219, 0.18);
    --status-color-neu-fg:          var(--color-brand-mid);

    /* Shadows (Dark = subtle + glow) */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.5);
    --shadow-xl: 0 24px 48px rgba(0,0,0,0.55);
    --shadow-glow-blue: 0 0 24px rgba(42, 52, 176, 0.3);
    --shadow-glow-gold: 0 0 16px rgba(234, 177, 7, 0.25);

    /* Pulse-Color-Scheme-Hint (Browser native scrollbars/inputs) */
    color-scheme: dark;
}

:root[data-theme="light"] {
    /* Brand bleibt identisch (Royal-Blau ist Brand) — Logo-Range siehe Dark-Theme. */
    --color-brand-primary: #2a34b0;
    --color-brand-deep: #1a2670;
    --color-brand-mid: #4f7edb;
    --color-brand-end: #0a0d1a;
    --gradient-brand: linear-gradient(160deg, #2a34b0 0%, #0a0d1a 100%);

    /* Surface — invertiert, aber warm */
    --color-bg-base: #ffffff;
    --color-bg-elevated: #f7f8fc;
    --color-bg-card: #ffffff;
    --color-bg-hover: #f0f2f8;

    /* Text — Phase 2b.13: alpha-Stack auf Schwarz fuer Lesbarkeit
       (war vorher blau-tinted Solid-Greys, Light war Stiefkind). */
    --color-text-primary: #0a0a0a;
    --color-text-secondary: rgba(10, 10, 10, 0.78);
    --color-text-tertiary: rgba(10, 10, 10, 0.65);
    --color-text-muted: rgba(10, 10, 10, 0.55);
    --color-text-disabled: rgba(10, 10, 10, 0.40);

    /* Border */
    --color-border: #e5e8f0;
    --color-border-strong: #d1d5e0;

    /* Glass + Brand-Light + Aurora-Tokens (Light-Variant deutlich reduziert) */
    --color-border-glass: rgba(15, 23, 42, 0.06);
    --color-border-glass-strong: rgba(15, 23, 42, 0.10);
    --color-bg-card-solid: #ffffff;
    --color-bg-hover-solid: #f0f2f8;
    --color-text-subtle: rgba(10, 10, 10, 0.38);
    --color-brand-light: #7ab8f0;
    --color-brand-glow: rgba(42, 52, 176, 0.18);
    --color-brand-glow-light: rgba(122, 184, 240, 0.30);
    --aurora-primary: rgba(42, 52, 176, 0.10);
    --aurora-secondary: rgba(122, 184, 240, 0.08);
    --aurora-tertiary: rgba(80, 90, 200, 0.06);

    /* Accent identisch (Gold ist Brand) */
    --color-accent-gold: #eab107;
    --color-accent-gold-soft: #eab10722;
    --color-accent-gold-deep: #b88806;

    /* Semantic identisch */
    --color-success: #16a34a;
    --color-success-soft: #16a34a22;
    --color-warning: #d97706;
    --color-warning-soft: #d9770622;
    --color-danger: #dc2626;
    --color-danger-soft: #dc262622;
    --color-info: #2a34b0;
    --color-info-soft: #2a34b022;

    /* 2d.4 Etappe 1: Status-Card-Tokens — Light-Mode-Variante.
       Hier funktioniert dunkler Text auf hellem Tint gut. */
    --status-error-bg: rgba(220, 38, 38, 0.08);
    --status-error-border: rgba(220, 38, 38, 0.40);
    --status-error-text: rgba(127, 29, 29, 0.92);
    --status-error-icon: #b91c1c;
    --status-warn-bg: rgba(217, 119, 6, 0.08);
    --status-warn-border: rgba(217, 119, 6, 0.40);
    --status-warn-text: rgba(120, 53, 15, 0.92);
    --status-warn-icon: #b45309;
    --status-success-bg: rgba(22, 163, 74, 0.08);
    --status-success-border: rgba(22, 163, 74, 0.40);
    --status-success-text: rgba(20, 83, 45, 0.92);
    --status-success-icon: #15803d;
    --status-info-bg: rgba(37, 99, 235, 0.08);
    --status-info-border: rgba(37, 99, 235, 0.40);
    --status-info-text: rgba(30, 58, 138, 0.92);
    --status-info-icon: #1d4ed8;

    /* Sweep 2d.5.7.c.1.2 Etappe 2: Kontakt-Icon-Tokens — Light-Theme. */
    --contact-icon-bg-inactive:  rgba(10, 10, 10, 0.03);
    --contact-icon-fg-inactive:  rgba(10, 10, 10, 0.42);
    --contact-icon-border:       rgba(10, 10, 10, 0.06);
    --contact-icon-bg-active:    rgba(42, 52, 176, 0.08);
    --contact-icon-fg-active:    var(--color-brand-primary);
    --contact-icon-border-active: rgba(42, 52, 176, 0.24);
    --contact-icon-bg-hover:     rgba(42, 52, 176, 0.14);
    --contact-icon-fg-hover:     var(--color-brand-primary);
    --contact-icon-border-hover: rgba(42, 52, 176, 0.38);

    /* Sweep 2d.5.7.c Etappe 2: Status-Pill-Color-Mapping fuer
       .pulse-data-table + .pulse-status-pill — Light-Theme. */
    --status-color-verified-bg:     rgba(22, 163, 74, 0.10);
    --status-color-verified-fg:     #15803d;
    --status-color-pruefen-bg:      rgba(217, 119, 6, 0.10);
    --status-color-pruefen-fg:      #b45309;
    --status-color-kein-link-bg:    rgba(10, 10, 10, 0.06);
    --status-color-kein-link-fg:    rgba(10, 10, 10, 0.65);
    --status-color-disqualified-bg: rgba(220, 38, 38, 0.10);
    --status-color-disqualified-fg: #b91c1c;
    --status-color-offen-bg:        rgba(42, 52, 176, 0.10);
    --status-color-offen-fg:        var(--color-brand-primary);
    --status-color-neu-bg:          rgba(79, 126, 219, 0.10);
    --status-color-neu-fg:          var(--color-brand-mid);

    /* Shadows (Light = klassische Drop-Shadows) */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);
    --shadow-xl: 0 24px 48px rgba(15, 23, 42, 0.16);
    --shadow-glow-blue: 0 0 0 4px rgba(42, 52, 176, 0.12);
    --shadow-glow-gold: 0 0 0 4px rgba(234, 177, 7, 0.16);

    color-scheme: light;
}

/* ============================================================
   Typography — Inter Variable
   ============================================================ */
:root {
    --font-sans: 'Inter', 'Inter Variable', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-display: 'Inter Display', 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

    /* Modular Type-Scale */
    --text-2xs: 0.6875rem;     /* 11 */
    --text-xs: 0.75rem;         /* 12 */
    --text-sm: 0.875rem;        /* 14 */
    --text-base: 0.9375rem;     /* 15 — body */
    --text-md: 1rem;            /* 16 */
    --text-lg: 1.125rem;        /* 18 */
    --text-xl: 1.5rem;          /* 24 */
    --text-2xl: 2rem;           /* 32 */
    --text-3xl: 2.5rem;         /* 40 */
    --text-display: 3.5rem;     /* 56 — Hero */

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.05em;

    --line-height-tight: 1.1;
    --line-height-snug: 1.3;
    --line-height-base: 1.5;
    --line-height-relaxed: 1.7;

    /* Spacing 8px-Base */
    --space-0: 0;
    --space-1: 0.25rem;     /* 4 */
    --space-2: 0.5rem;      /* 8 */
    --space-3: 0.75rem;     /* 12 */
    --space-4: 1rem;        /* 16 */
    --space-5: 1.25rem;     /* 20 */
    --space-6: 1.5rem;      /* 24 */
    --space-8: 2rem;        /* 32 */
    --space-10: 2.5rem;     /* 40 */
    --space-12: 3rem;       /* 48 */
    --space-16: 4rem;       /* 64 */
    --space-24: 6rem;       /* 96 */

    /* Border-Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-pill: 9999px;
    --radius-full: 9999px;

    /* Animation-Tokens */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --duration-fast: 150ms;
    --duration-base: 250ms;
    --duration-slow: 400ms;

    /* Layout */
    --sidebar-width: 240px;
    --max-content-width: 1400px;
}

/* ============================================================
   Sweep 2c.27 Etappe 3 — Komponent-Tokens (Pulse-Design-System)
   ============================================================
   Indirection-Layer: gleiche Werte wie bisher in style.css hardcoded,
   aber zentralisiert als CSS-Custom-Properties. Bestehende Klassen
   (.btn-*, .input, .pulse-glass-*, .tpf-*, .card-*) koennen ueber
   Token-References konsolidiert werden — Modul-Sweeps ziehen das
   sukzessive nach (siehe docs/style-migration.md).

   Visual-Regression-Garantie: alle Werte hier sind 1:1 die Werte
   die in style.css aktuell hardcoded stehen. Nur eine Indirection-
   Layer.
*/
:root {
    /* --- Buttons --- */
    --btn-padding-md: 9px var(--space-4);          /* style.css Z.3849 */
    --btn-padding-sm: 5px 10px;                     /* style.css Z.3848 */
    --btn-padding-lg: 11px var(--space-5);          /* style.css Z.3850 */
    --btn-padding-large: 13px 24px;                 /* style.css Z.468 (.btn-large alt-Variante) */
    --btn-radius: var(--radius-md);                 /* 8px */
    --btn-font-size-md: var(--text-sm);             /* 14px */
    --btn-font-size-sm: var(--text-xs);             /* 12px */
    --btn-font-size-lg: var(--text-base);           /* 15px */
    --btn-font-weight: 500;
    --btn-transition: all var(--duration-fast) var(--ease-out);
    --btn-gap: var(--space-2);

    /* --- Inputs (Glass-Variante = Pulse-Standard) --- */
    --input-bg: rgba(255, 255, 255, 0.04);
    --input-bg-hover: rgba(255, 255, 255, 0.06);
    --input-bg-focus: rgba(255, 255, 255, 0.06);
    --input-bg-light: rgba(0, 0, 0, 0.03);
    --input-bg-light-hover: rgba(0, 0, 0, 0.05);
    --input-bg-light-focus: rgba(255, 255, 255, 0.95);
    --input-border: rgba(255, 255, 255, 0.10);
    --input-border-light: rgba(0, 0, 0, 0.10);
    --input-border-hover: rgba(79, 126, 219, 0.35);
    --input-border-focus: rgba(79, 126, 219, 0.6);
    --input-padding: 0 var(--space-3);              /* style.css Z.3635 */
    --input-padding-with-icon: 0 var(--space-3) 0 48px;  /* search-v3 Pattern */
    --input-height: 40px;                            /* style.css Z.3634 */
    --input-radius: var(--radius-md);
    --input-font-size: var(--text-sm);
    --input-shadow-focus: 0 0 0 3px rgba(42, 52, 176, 0.18);
    --input-shadow-focus-strong: 0 0 0 4px rgba(42, 52, 176, 0.10);

    /* --- Cards --- */
    --card-bg: var(--color-bg-card);
    --card-border: var(--color-border);
    --card-padding: var(--space-6);                  /* 24px */
    --card-padding-lg: 24px 28px;                    /* tpf-card */
    --card-radius: var(--radius-lg);                 /* 12px */
    --card-radius-sm: var(--radius-md);
    --card-radius-lg: var(--radius-xl);
    --card-margin-bottom: var(--space-6);
    --card-shadow: var(--shadow-md);

    /* --- Field-Labels (Pulse-Standard ALL-CAPS Pattern) --- */
    --label-font-size: 11px;
    --label-letter-spacing: 0.04em;
    --label-text-transform: uppercase;
    --label-font-weight: 700;
    --label-color: var(--color-text-muted);

    /* --- Hint-/Helper-Text --- */
    --hint-font-size: var(--text-xs);
    --hint-color: var(--color-text-muted);

    /* --- Pillen (Status / Tag / Score) --- */
    --pill-padding: 2px 8px;
    --pill-padding-md: 4px 10px;
    --pill-radius: var(--radius-pill);
    --pill-font-size: 11px;
    --pill-font-weight: 600;
    --pill-letter-spacing: 0.02em;

    /* --- Modal / Drawer --- */
    --modal-backdrop: rgba(0, 0, 0, 0.55);
    --modal-z-base: 9500;       /* Modale */
    --modal-z-toast: 10000;     /* Toast oben drauf */
    --modal-z-drawer: 9000;     /* Filter-Drawer */
    --modal-z-bulkbar: 4000;    /* Sticky-Bulk-Bar */
    --modal-z-widget: 5000;     /* Pulse-KI-Widget */

    /* --- Brand-Glow (Bulk-Bar v2 / Sticky-Save / Sample-Tool) --- */
    --brand-ring: 0 0 0 2px rgba(42, 52, 176, 0.20);
    --brand-glow-soft: 0 0 24px rgba(42, 52, 176, 0.18);
    --brand-glow-strong: 0 0 32px rgba(42, 52, 176, 0.30);
    --brand-glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* ============================================================
   Theme-Transition (smooth wenn User toggelt)
   ============================================================ */
:root[data-theme-transitioning] *,
:root[data-theme-transitioning] *::before,
:root[data-theme-transitioning] *::after {
    transition: background-color var(--duration-base) var(--ease-out),
                color var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out) !important;
}

@media (prefers-reduced-motion: reduce) {
    :root[data-theme-transitioning] *,
    :root[data-theme-transitioning] *::before,
    :root[data-theme-transitioning] *::after {
        transition: none !important;
    }
}