/**
 * Zentrale Farbpalette (Light Mode). Flächen: rein weiß, keine neutral-grauen Hintergründe.
 * Hover und Rahmen nutzen einen sehr leichten Tint der Primary-Farbe (Türkis/Teal), wirkt sauberer als Grau.
 * Alle Farben ausschließlich hier; andere CSS-Dateien nutzen nur var(--...).
 */
:root {
    /* Backgrounds – durchgehend weiß, kein Grau als Seiten- oder Panel-Fläche */
    --color-background: #ffffff;
    --color-layout-content-area-bg: #ffffff;
    --color-surface: #ffffff;
    /* Hover: Primary-Tint auf Weiß (kein neutrales Grau) */
    --color-surface-hover: rgba(20, 184, 166, 0.09);

    /* Brand / Primary – Türkis-Teal (wie Buttons) */
    --color-primary: #0f766e;
    --color-primary-hover: #115e59;
    --color-secondary: #6a7b88;
    --color-tertiary: #8a9aa6;

    /* Buttons – Türkis-Teal, einfarbig (keine Verläufe) */
    --color-button-accent-start: #2dd4bf;
    --color-button-accent-mid: #14b8a6;
    --color-button-accent-end: #0f766e;
    --color-button-primary-bg: #14b8a6;
    --color-button-primary-bg-hover: #0f766e;
    --color-button-primary-border: rgba(255, 255, 255, 0.24);
    --gradient-button-primary: var(--color-button-primary-bg);
    --gradient-button-primary-hover: var(--color-button-primary-bg-hover);
    --shadow-button: none;
    --shadow-button-hover: none;
    --shadow-button-header: none;
    --shadow-button-focus-ring: none;
    --color-button-secondary-text: #115e59;
    --color-button-secondary-text-hover: #0f766e;
    --color-button-secondary-border: rgba(20, 184, 166, 0.4);
    --color-button-secondary-border-hover: #14b8a6;
    --color-button-secondary-shadow: none;
    --color-button-ghost-text: #475569;
    --color-button-ghost-text-hover: #0f766e;
    --color-button-ghost-border-hover: rgba(20, 184, 166, 0.22);

    /* Hero-Badge – dezenter Brand-Tint, klare Kontur, ruhige Elevation (ohne Glow-Halo) */
    --color-badge-bg: #ffffff;
    --gradient-badge-bg: linear-gradient(
        135deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(240, 253, 250, 0.92) 52%,
        rgba(204, 251, 241, 0.35) 100%
    );
    --color-badge-border: rgba(20, 184, 166, 0.28);
    --color-badge-text: #115e59;
    --color-badge-dot: var(--color-button-accent-start);
    --color-badge-dot-ring: rgba(20, 184, 166, 0.22);
    --color-badge-dot-glow: rgba(15, 118, 110, 0.45);
    --shadow-badge: none;

    /* Kacheln, Karten, Sections – strahlend weiß, kein Grauton in Fläche oder Schatten */
    --color-surface-elevated-bg: #ffffff;
    --color-surface-elevated-hover-bg: #ffffff;
    --radius-surface-elevated: 1rem;
    --radius-surface-elevated-icon: 0.75rem;
    /* Kacheln – dezente Türkis-Kontur (nicht zu viel Türkis) */
    --color-tile-border: rgba(20, 184, 166, 0.28);
    --color-tile-border-hover: rgba(15, 118, 110, 0.45);
    --gradient-tile-top-accent: var(--gradient-headline-text-h1-h2);
    --color-surface-elevated-border: var(--color-tile-border);
    --color-surface-elevated-border-hover: var(--color-tile-border-hover);
    --color-surface-elevated-icon-bg: #ffffff;
    --gradient-surface-elevated-icon-bg: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
    --shadow-surface-elevated: none;
    --shadow-surface-elevated-hover: none;
    --radius-card-feature: var(--radius-surface-elevated);
    --radius-card-feature-icon: var(--radius-surface-elevated-icon);
    --color-card-feature-border: var(--color-surface-elevated-border);
    --color-card-feature-border-hover: var(--color-surface-elevated-border-hover);
    --gradient-card-feature-icon-bg: var(--gradient-surface-elevated-icon-bg);
    --shadow-card-feature: var(--shadow-surface-elevated);
    --shadow-card-feature-hover: var(--shadow-surface-elevated-hover);

    /* Text Colors – angepasst auf Projekt-Farbe */
    --color-text: #2b3640;
    --color-text-muted: #4a6274;
    --color-text-inverse: #ffffff;
    --color-headline: #0f766e;
    /* Dezenter Akzent für Headlines (z.B. Unterstreichung, Border) */
    --color-headline-accent: #14b8a6;

    /* Links – nutzen ebenfalls die Projekt-Farbe */
    --color-link: #0f766e;
    --color-link-hover: #115e59;
    /* Form-Inline-Links: Sekundär-Button-Look (Outline, Primärfarbe – kein Blau) */
    --color-link-form-inline: var(--color-button-secondary-text);
    --color-link-form-inline-hover: var(--color-button-secondary-text-hover);
    --color-link-form-inline-bg: var(--color-background);
    --color-link-form-inline-bg-hover: var(--color-surface-hover);
    --color-link-form-inline-border: var(--color-button-secondary-border);
    --color-link-form-inline-border-hover: var(--color-button-secondary-border-hover);
    --color-form-links-inline-bar-bg: rgba(20, 184, 166, 0.06);
    --color-form-links-inline-bar-border: rgba(20, 184, 166, 0.18);

    /* Header – nur Türkis (Verlauf) und Weiß für Text/Icons */
    --gradient-header-bg: var(--gradient-button-primary);
    --color-header-border: rgba(255, 255, 255, 0.22);
    --color-header-foreground: #ffffff;
    --color-header-foreground-hover: rgba(255, 255, 255, 0.82);
    --color-header-foreground-subtle: rgba(255, 255, 255, 0.65);
    --color-header-on-primary-button-text: #0f766e;
    --color-header-on-primary-button-text-hover: #115e59;

    /* Header-Logo (Mark PNG + Wortmarke rein weiß auf Türkis-Header) */
    --gradient-logo-mark: linear-gradient(135deg, #2dd4bf 0%, #14b8a6 46%, #0f766e 100%);
    --shadow-logo-mark: none;
    --color-logo-mark-icon-top: rgba(255, 255, 255, 0.98);
    --color-logo-mark-icon-left: rgba(255, 255, 255, 0.84);
    --color-logo-mark-icon-right: rgba(255, 255, 255, 0.7);
    --color-header-logo-text: #ffffff;

    /* Borders – leichter Primary-Tint statt neutralem Grau */
    --color-border: rgba(15, 118, 110, 0.14);
    --color-border-highlight: rgba(15, 118, 110, 0.24);
    /* Sehr dezente Innentrenner (z. B. Pricing-Meta-Spalte), kaum sichtbar auf Weiß */
    --color-border-faint: rgba(70, 89, 103, 0.07);

    /* Overlay (Modal-Backdrop) – b-cube: dezent dunkel */
    --color-overlay-backdrop: rgba(0, 0, 0, 0.5);

    /* Table – weiße Flächen, Zeilen-Hover wie surface-hover (Primary-Tint) */
    --color-table-row-bg: #ffffff;
    --color-table-row-hover: rgba(70, 89, 103, 0.065);
    --color-glass-surface-72: rgba(255, 255, 255, 0.72);
    --color-glass-surface-74: rgba(255, 255, 255, 0.74);
    --color-glass-surface-76: rgba(255, 255, 255, 0.76);
    --color-glass-surface-82: rgba(255, 255, 255, 0.82);
    --color-form-select-surface: rgba(255, 255, 255, 0.86);
    --color-form-select-surface-hover: rgba(255, 255, 255, 0.92);
    --color-form-select-arrow: rgba(70, 89, 103, 0.8);

    /* Status Colors (unverändert funktional) */
    --color-success: #0d8050;
    --color-error: #c53030;
    --color-error-light: #e57373;
    --color-error-hover: #9b2c2c;
    --color-on-error: #ffffff;
    --color-warning: #d69e2e;
    --color-info: #2b6cb0;

    /* Message (Success, Error, Info) – Background, Border, Text */
    --color-success-bg: #d4edda;
    --color-success-border: #c3e6cb;
    --color-success-text: #155724;
    --color-error-bg: #f8d7da;
    --color-error-border: #f5c6cb;
    --color-error-text: #721c24;
    --color-info-bg: #d1ecf1;
    --color-info-border: #bee5eb;
    --color-info-text: #0c5460;

    /* Pricing calculations (terminal / markdown / price history UI) */
    --color-pricing-calc-accent-emerald: #34d399;
    --color-pricing-calc-surface-deep: #070a0d;
    --color-pricing-calc-gradient-mid: #0c1218;
    --color-pricing-calc-gradient-end: #050608;
    --color-pricing-calc-text-muted: #c8d0d8;
    --color-pricing-calc-accent-mint: #6ee7b7;
    --color-pricing-calc-accent-sky: #38bdf8;
    --color-pricing-calc-accent-sky-light: #7dd3fc;
    --color-pricing-calc-slate-muted: #94a3b8;
    --color-pricing-calc-sky-pale: #e0f2fe;
    --color-pricing-calc-slate-light: #f1f5f9;
    --color-pricing-calc-teal: #5eead4;
    --color-pricing-calc-slate: #cbd5e1;
    --color-pricing-calc-teal-dark: #022c22;
    --color-pricing-calc-amber: #fde68a;
    --color-pricing-calc-green: #4ade80;
    --color-pricing-calc-cyan: #22d3ee;
    --color-pricing-calc-violet: #a78bfa;
    --color-pricing-calc-yellow: #fbbf24;
    --color-pricing-calc-yellow-bright: #fde047;
    --color-pricing-calc-orange: #fdba74;
    --color-pricing-calc-teal-accent: #14b8a6;
    --color-pricing-calc-slate-deep: #020617;
    --color-pricing-calc-green-muted: #94d479;
    --color-pricing-calc-mint-pale: #ecfdf5;

    /* Gradients – dezent um Projekt-Farbe herum */
    --gradient-brand: linear-gradient(180deg, #5b6d7b 0%, #465967 100%);
    --gradient-text: linear-gradient(to right, #465967, #6a7b88);
    --color-gold-gradient-start: #0f766e;
    --color-gold-gradient-mid: #14b8a6;
    --color-gold-gradient-end: #2dd4bf;
    --gradient-gold: linear-gradient(to right, var(--color-gold-gradient-start), var(--color-gold-gradient-mid), var(--color-gold-gradient-end));

    /* Shadows – projektweit deaktiviert (briefing/design.md 003.007) */
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-glow: none;
    --shadow-focus: none;
    --shadow-focus-error: none;

    /* Dashboard: Price-History XPath Check (Referenz: dunkle Karten auf weißem Seitengrund, helle Historie-Tabelle) */
    --dashboard-xpath-inner-gap: 20px;
    --dashboard-xpath-inner-padding-bottom: 8px;
    --dashboard-xpath-tech-border: #2e3644;
    --dashboard-xpath-tech-bg: #121826;
    --dashboard-xpath-tech-text: #d1d5db;
    --dashboard-xpath-screenshot-border: #3d4a5c;
    --dashboard-xpath-screenshot-bg: #0a0f18;
    --dashboard-xpath-pre-color: #e5e7eb;
    --dashboard-xpath-pre-bg: #0c1018;
    --dashboard-xpath-pre-border: #2e3644;
    --dashboard-xpath-tile-border-default: rgba(148, 163, 184, 0.28);
    --dashboard-xpath-tile-bg-start: #121826;
    --dashboard-xpath-tile-bg-end: #1b2433;
    --dashboard-xpath-tile-shadow: transparent;
    --dashboard-xpath-tile-neutral-border: rgba(96, 165, 250, 0.35);
    --dashboard-xpath-tile-status-border: rgba(129, 140, 248, 0.45);
    --dashboard-xpath-tile-status-bg-start: #1a1528;
    --dashboard-xpath-tile-purchase-border: rgba(45, 212, 191, 0.4);
    --dashboard-xpath-tile-purchase-bg-start: #121826;
    --dashboard-xpath-tile-list-border: rgba(251, 191, 36, 0.4);
    --dashboard-xpath-tile-list-bg-start: #121826;
    --dashboard-xpath-label-color: #9ca3af;
    --dashboard-xpath-value-color: #f8fafc;
    --dashboard-xpath-value-strong-color: #2dd4bf;
    --dashboard-xpath-euro-highlight-color: #14b8a6;
    --dashboard-xpath-status-message-color: #a5b4fc;
    --dashboard-xpath-mono-color: #93c5fd;
    --dashboard-xpath-key-color: #9ca3af;
    --dashboard-xpath-val-color: #f1f5f9;
    --dashboard-xpath-val-strong-color: #10b981;
    --dashboard-xpath-val-risk-color: #fbbf24;
    --dashboard-xpath-compare-ok-color: #10b981;
    --dashboard-xpath-compare-ok-bg: rgba(16, 185, 129, 0.18);
    --dashboard-xpath-compare-ok-border: rgba(16, 185, 129, 0.45);
    --dashboard-xpath-compare-error-color: #fecaca;
    --dashboard-xpath-compare-error-bg: rgba(69, 10, 10, 0.92);
    --dashboard-xpath-compare-error-border: rgba(248, 113, 113, 0.55);
    --dashboard-xpath-delta-color: #fde68a;

    /* Dashboard: Pricing-Dokumentation (Türkis/Teal, tekki-dark Akzente) */
    --pricing-documentation-accent-traffic: #2dd4bf;
    --pricing-documentation-accent-strategic: #14b8a6;
    --pricing-documentation-accent-core: #0f766e;
    --pricing-documentation-surface-dark: #041412;
    --pricing-documentation-surface-dark-mid: #062622;
    --pricing-documentation-surface-dark-elevated: #0a2f2b;
    --pricing-documentation-border-teal: rgba(45, 212, 191, 0.38);
    --pricing-documentation-border-teal-strong: rgba(20, 184, 166, 0.55);
    --pricing-documentation-text-on-dark: #ecfdf5;
    --pricing-documentation-text-muted-on-dark: #99f6e4;
    --pricing-documentation-path-border: rgba(45, 212, 191, 0.42);
    --pricing-documentation-path-bg-start: rgba(6, 38, 34, 0.96);
    --pricing-documentation-path-bg-end: rgba(4, 20, 18, 0.98);
    --pricing-documentation-path-text: #5eead4;
    --pricing-documentation-formula-border: rgba(20, 184, 166, 0.45);
    --pricing-documentation-formula-bg-start: rgba(8, 44, 40, 0.94);
    --pricing-documentation-formula-bg-end: rgba(4, 26, 24, 0.98);
    --pricing-documentation-formula-text: #a7f3d0;
    --pricing-documentation-code-inline-bg: rgba(6, 38, 34, 0.88);
    --pricing-documentation-code-inline-text: #ccfbf1;
    --pricing-documentation-code-inline-border: rgba(45, 212, 191, 0.28);
    --pricing-documentation-prompt-bg-start: #041412;
    --pricing-documentation-prompt-bg-end: #020f0e;
    --pricing-documentation-prompt-text: #ccfbf1;
    --pricing-documentation-prompt-border: rgba(45, 212, 191, 0.48);
    --pricing-documentation-prompt-glow-1: rgba(20, 184, 166, 0.24);
    --pricing-documentation-prompt-glow-2: rgba(45, 212, 191, 0.16);
    --pricing-documentation-prompt-inset: rgba(94, 234, 212, 0.14);
    --pricing-documentation-prompt-shadow: transparent;
    --pricing-documentation-hero-border: rgba(45, 212, 191, 0.42);
    --pricing-documentation-hero-shadow: transparent;
    --pricing-documentation-example-surface: #062622;
    --pricing-documentation-example-border: rgba(45, 212, 191, 0.32);
    --pricing-documentation-reasoning-price-border: rgba(45, 212, 191, 0.45);
    --pricing-documentation-reasoning-price-bg-start: #062622;
    --pricing-documentation-reasoning-price-bg-mid: #083832;
    --pricing-documentation-reasoning-price-bg-end: #041412;
    --pricing-documentation-reasoning-price-text: #5eead4;
    --pricing-documentation-technical-surface: #041412;
    --pricing-documentation-technical-border: rgba(45, 212, 191, 0.35);

    /* Dashboard: Artikel-IDs-Tabelle (Spreadsheet-Kopfzeile, CI Primary + Blau-Teal) */
    --dashboard-article-ids-table-head-bg: linear-gradient(
        180deg,
        color-mix(in srgb, var(--color-primary) 5%, #ffffff) 0%,
        #ffffff 100%
    );
    --dashboard-article-ids-table-head-border: color-mix(in srgb, var(--color-primary) 32%, var(--color-border));
    --dashboard-article-ids-table-head-text: var(--color-primary);
    --dashboard-article-ids-table-head-inset-highlight: none;
    --dashboard-article-ids-table-grid-border: color-mix(in srgb, var(--color-primary) 16%, var(--color-border));
    --dashboard-article-ids-table-body-zebra: color-mix(in srgb, var(--color-primary) 4%, #ffffff);
    --dashboard-article-ids-table-head-sort-hover: color-mix(in srgb, var(--color-button-accent-start) 12%, transparent);
    --dashboard-article-ids-table-head-sort-active: color-mix(in srgb, var(--color-button-accent-start) 18%, transparent);

    /* Dashboard: Priorisieren-Job (Button und Log im Modal) */
    --dashboard-prioritise-button-bg: #14b8a6;
    --dashboard-prioritise-button-bg-hover: #0f766e;
    --dashboard-prioritise-button-border: #0f766e;
    --dashboard-prioritise-log-bg: #0f172a;
    --dashboard-prioritise-log-text: #d1fae5;

    /* Dashboard: dunkle Modale (Artikel-IDs-CSV, Pricing-CSV, Prompt, Preishistorie) */
    --dashboard-modal-dialog-bg: linear-gradient(165deg, #1a2332 0%, #131b28 45%, #0f141d 100%);
    --dashboard-modal-dialog-border: rgba(100, 116, 139, 0.42);
    --dashboard-modal-dialog-shadow: none;
    --dashboard-modal-dialog-text: #e2e8f0;
    --dashboard-modal-dialog-text-muted: #94a3b8;
    --dashboard-modal-dialog-headline: #ffffff;
    --dashboard-modal-dialog-preview-wrap-bg: linear-gradient(165deg, rgba(30, 41, 59, 0.5) 0%, rgba(15, 23, 42, 0.9) 52%, #0b1220 100%);
    --dashboard-modal-dialog-preview-wrap-border: rgba(71, 85, 105, 0.55);
    --dashboard-modal-dialog-preview-wrap-inset: rgba(255, 255, 255, 0.04);
    --dashboard-modal-dialog-preview-inner-bg: #0c1018;
    --dashboard-modal-dialog-preview-inner-border: rgba(51, 65, 85, 0.65);
    --dashboard-modal-dialog-table-head-bg: linear-gradient(180deg, #1e293b 0%, #141c28 100%);
    --dashboard-modal-dialog-table-head-text: #94a3b8;
    --dashboard-modal-dialog-table-cell-text: #e2e8f0;
    --dashboard-modal-dialog-table-row-alt: rgba(30, 41, 59, 0.42);
    --dashboard-modal-dialog-table-row-hover: rgba(56, 189, 248, 0.11);
    --dashboard-modal-dialog-table-border: rgba(51, 65, 85, 0.5);
    --dashboard-modal-dialog-progress-track-bg: rgba(148, 163, 184, 0.2);
    --dashboard-modal-dialog-disabled-bg: rgba(30, 41, 59, 0.72);
    --dashboard-modal-dialog-disabled-border: rgba(71, 85, 105, 0.5);
    --dashboard-modal-dialog-disabled-text: #64748b;
    --dashboard-modal-dialog-spinner-rim: rgba(148, 163, 184, 0.35);
    --dashboard-modal-dialog-spinner-accent: #38bdf8;
    --dashboard-modal-dialog-button-ghost-text: rgba(248, 250, 252, 0.88);
    --dashboard-modal-dialog-button-ghost-hover-bg: rgba(255, 255, 255, 0.12);
    --widget-screenshot-preview-ring: rgba(0, 0, 0, 0.35);
    --widget-status-available-border: rgba(52, 211, 153, 0.45);
    --widget-status-available-bg: rgba(16, 185, 129, 0.18);
    --widget-status-unavailable-bg: rgba(30, 41, 59, 0.65);

    /* Blog-Screens: dunkler Illustrations-/Code-Kasten (Variante fuer base-blogpost-svg) */
    --color-blogpost-code-border: #2e3642;
    --color-blogpost-code-bg: #151a22;

    /* Collapsible-Section (Dashboard Artikel-IDs u. a.) – strahlender Header, keine Graufläche */
    --gradient-collapsible-header: var(--gradient-button-primary);
    --gradient-collapsible-header-hover: var(--gradient-button-primary-hover);
    --color-collapsible-header-border: rgba(255, 255, 255, 0.22);
    --color-collapsible-section-border: rgba(37, 99, 235, 0.3);
    --shadow-collapsible-section: none;
    --color-collapsible-header-label: #e0f2fe;
    --color-collapsible-header-chevron: #ffffff;
    /* Collapsible-Header auf hellem Türkis-Tint (kein Blau) */
    --gradient-collapsible-header-headline: linear-gradient(118deg, #ffffff 0%, #f0fdfa 50%, #ccfbf1 100%);
    --shadow-collapsible-header-focus: none;

    /* Headline-Text: einfarbig in Primärfarben (Legacy-Alias für Akzent-Balken) */
    --gradient-headline-text-h1-h2: var(--color-headline);
    --gradient-headline-text-h3: var(--color-primary);
    --gradient-headline-text-h4: var(--color-headline-accent);

    /* Pricing-Spalten in div-tables.css (Meta- und Reasoning-Spalten) */
    --gradient-pricing-meta-column: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    --gradient-pricing-meta-column-hover: linear-gradient(180deg, #ffffff 0%, #f3f9ff 100%);
    --gradient-pricing-reasoning-column: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    --gradient-pricing-reasoning-column-hover: linear-gradient(180deg, #ffffff 0%, #f3f9ff 100%);
}