/**
 * Design Tokens — globales Branding über CSS-Variablen (HSL-Komponenten).
 * Agenten/KI: Primärfarbe etc. anpassen, indem nur --cms-*-h|s|l geändert werden;
 * kein Suchen/Ersetzen in komponenten-spezifischem CSS nötig.
 *
 * Mapping: --primary-color / --lp-ai-blue, --bg-color / --lp-bg-color, …
 */
:root {
    --cms-radius-base: 1.25rem;
}

body.cms-landing-theme {
    /* HSL-Kanäle (moderne Syntax: hsl(h s l) ohne Kommas) */
    --cms-primary-h: 214;
    --cms-primary-s: 100%;
    --cms-primary-l: 58%;

    --cms-secondary-h: 280;
    --cms-secondary-s: 100%;
    --cms-secondary-l: 60%;

    --cms-accent-pink-h: 340;
    --cms-accent-pink-s: 100%;
    --cms-accent-pink-l: 67%;

    --cms-bg-h: 0;
    --cms-bg-s: 0%;
    --cms-bg-l: 100%;

    --cms-text-h: 220;
    --cms-text-s: 13%;
    --cms-text-l: 18%;

    --cms-muted-h: 220;
    --cms-muted-s: 9%;
    --cms-muted-l: 46%;

    /* Semantische Tokens (für Agenten lesbar) */
    --primary-color: hsl(var(--cms-primary-h) var(--cms-primary-s) var(--cms-primary-l));
    --secondary-color: hsl(var(--cms-secondary-h) var(--cms-secondary-s) var(--cms-secondary-l));
    --accent-color: hsl(var(--cms-accent-pink-h) var(--cms-accent-pink-s) var(--cms-accent-pink-l));
    --bg-color: hsl(var(--cms-bg-h) var(--cms-bg-s) var(--cms-bg-l));
    --text-color: hsl(var(--cms-text-h) var(--cms-text-s) var(--cms-text-l));
    --text-muted-color: hsl(var(--cms-muted-h) var(--cms-muted-s) var(--cms-muted-l));
    --border-radius: var(--cms-radius-base);

    /* Legacy-Aliase (#brief-ai-lp / landing.css) */
    --lp-bg-color: var(--bg-color);
    --lp-text-main: var(--text-color);
    --lp-text-muted: var(--text-muted-color);
    --lp-ai-blue: var(--primary-color);
    --lp-ai-purple: var(--secondary-color);
    --lp-ai-pink: var(--accent-color);
    --lp-surface-glass: hsl(var(--cms-bg-h) var(--cms-bg-s) 100% / 0.75);
    --lp-border-radius: var(--border-radius);

    /* Hellmodus — Header, Karten, Modals, Auth (Dark: siehe html[data-lp-color-scheme="dark"]) */
    --lp-header-bg: hsl(var(--cms-bg-h) var(--cms-bg-s) 100% / 0.88);
    --lp-header-border: rgba(15, 23, 42, 0.08);
    --lp-nav-badge-border: hsl(var(--cms-muted-h) var(--cms-muted-s) var(--cms-muted-l) / 0.28);
    --lp-nav-badge-hover-bg: hsl(var(--cms-primary-h) var(--cms-primary-s) var(--cms-primary-l) / 0.1);
    --lp-card-surface: hsl(var(--cms-bg-h) var(--cms-bg-s) 100% / 0.62);
    --lp-card-surface-hover: hsl(var(--cms-bg-h) var(--cms-bg-s) 100% / 0.92);
    --lp-card-border: hsl(var(--cms-secondary-h) var(--cms-secondary-s) var(--cms-secondary-l) / 0.08);
    --lp-card-border-hover: hsl(var(--cms-secondary-h) var(--cms-secondary-s) var(--cms-secondary-l) / 0.2);
    --lp-section-alt-bg: hsl(var(--cms-bg-h) var(--cms-bg-s) 98%);
    --lp-accordion-border: hsl(var(--cms-muted-h) var(--cms-muted-s) var(--cms-muted-l) / 0.22);
    --lp-modal-scrim: hsl(var(--cms-bg-h) var(--cms-bg-s) 100% / 0.62);
    --lp-modal-panel: hsl(var(--cms-bg-h) var(--cms-bg-s) 100%);
    --lp-modal-header-border: hsl(var(--cms-muted-h) var(--cms-muted-s) var(--cms-muted-l) / 0.2);
    --lp-chat-input-bg: hsl(214 32% 96%);
    --lp-chat-input-bg-focus: hsl(var(--cms-bg-h) var(--cms-bg-s) 100%);
    --lp-input-placeholder: hsl(218 13% 60%);
    --lp-icon-btn-hover: rgba(0, 0, 0, 0.06);
    --lp-dashboard-border: rgba(15, 23, 42, 0.08);
    --lp-blog-divider: rgba(31, 41, 55, 0.12);
    --lp-reasoning-border: rgba(0, 0, 0, 0.06);
    --lp-reasoning-shadow: rgba(0, 0, 0, 0.08);
    --lp-hero-link: var(--text-color);
    --lp-auth-brand-gradient: linear-gradient(152deg, #eef6ff 0%, #f4edff 38%, #fff0f3 72%, #faf5ff 100%);
    --lp-auth-main-bg: #ffffff;
    --lp-auth-panel-bg: #fafbfc;
    --lp-auth-panel-border: #eef0f3;
    --lp-auth-main-border: rgba(0, 0, 0, 0.06);
    --lp-auth-input-border: #e5e7eb;
    --lp-auth-input-inner-bg: #ffffff;
    --lp-auth-input-toggle-bg: #f9fafb;
    --lp-auth-input-toggle-hover: #f3f4f6;
    --lp-auth-meta-border: #eef0f3;
}

html[data-lp-color-scheme="dark"] body.cms-landing-theme {
    --cms-bg-h: 222;
    --cms-bg-s: 47%;
    --cms-bg-l: 9%;

    --cms-text-h: 210;
    --cms-text-s: 40%;
    --cms-text-l: 96%;

    --cms-muted-h: 215;
    --cms-muted-s: 14%;
    --cms-muted-l: 58%;

    --cms-primary-l: 60%;
    --cms-secondary-l: 58%;

    --lp-surface-glass: hsl(var(--cms-bg-h) var(--cms-bg-s) 16% / 0.78);
    --lp-header-bg: hsl(var(--cms-bg-h) var(--cms-bg-s) 11% / 0.92);
    --lp-header-border: rgba(255, 255, 255, 0.08);
    --lp-nav-badge-border: rgba(255, 255, 255, 0.16);
    --lp-nav-badge-hover-bg: rgba(255, 255, 255, 0.08);
    --lp-card-surface: hsl(var(--cms-bg-h) var(--cms-bg-s) 14% / 0.65);
    --lp-card-surface-hover: hsl(var(--cms-bg-h) var(--cms-bg-s) 20% / 0.92);
    --lp-card-border: hsl(var(--cms-secondary-h) var(--cms-secondary-s) var(--cms-secondary-l) / 0.14);
    --lp-card-border-hover: hsl(var(--cms-secondary-h) var(--cms-secondary-s) var(--cms-secondary-l) / 0.3);
    --lp-section-alt-bg: hsl(var(--cms-bg-h) var(--cms-bg-s) 11%);
    --lp-accordion-border: rgba(255, 255, 255, 0.1);
    --lp-modal-scrim: rgba(0, 0, 0, 0.58);
    --lp-modal-panel: hsl(var(--cms-bg-h) var(--cms-bg-s) 13%);
    --lp-modal-header-border: rgba(255, 255, 255, 0.1);
    --lp-chat-input-bg: hsl(var(--cms-bg-h) var(--cms-bg-s) 18%);
    --lp-chat-input-bg-focus: hsl(var(--cms-bg-h) var(--cms-bg-s) 15%);
    --lp-input-placeholder: hsl(var(--cms-muted-h) var(--cms-muted-s) 48%);
    --lp-icon-btn-hover: rgba(255, 255, 255, 0.1);
    --lp-dashboard-border: rgba(255, 255, 255, 0.1);
    --lp-blog-divider: rgba(255, 255, 255, 0.12);
    --lp-reasoning-border: rgba(255, 255, 255, 0.08);
    --lp-reasoning-shadow: rgba(0, 0, 0, 0.35);
    --lp-hero-link: hsl(var(--cms-text-h) var(--cms-text-s) var(--cms-text-l));
    --lp-auth-brand-gradient: linear-gradient(152deg, hsl(222 45% 12%) 0%, hsl(275 38% 14%) 45%, hsl(222 42% 10%) 100%);
    --lp-auth-main-bg: hsl(var(--cms-bg-h) var(--cms-bg-s) 9%);
    --lp-auth-panel-bg: hsl(var(--cms-bg-h) var(--cms-bg-s) 13%);
    --lp-auth-panel-border: rgba(255, 255, 255, 0.1);
    --lp-auth-main-border: rgba(255, 255, 255, 0.08);
    --lp-auth-input-border: rgba(255, 255, 255, 0.14);
    --lp-auth-input-inner-bg: hsl(var(--cms-bg-h) var(--cms-bg-s) 12%);
    --lp-auth-input-toggle-bg: hsl(var(--cms-bg-h) var(--cms-bg-s) 16%);
    --lp-auth-input-toggle-hover: hsl(var(--cms-bg-h) var(--cms-bg-s) 20%);
    --lp-auth-meta-border: rgba(255, 255, 255, 0.1);
}