/* Änderungsprotokoll: 2026-06-16 | parent-agent | Logo-Farbschema Backlink AI (Navy #004090, Blau #0070c0, Cyan #00b5e2) */
:root {
    /* Logo-Palette (logo-backlink-ai.png) */
    --color-brand-navy: #004090;
    --color-brand-blue: #0070c0;
    --color-brand-cyan: #00b5e2;
    --color-brand-cyan-light: #20d0f0;

    /* Backgrounds (Light Mode) – strahlend weiß */
    --color-background: #ffffff;
    --color-surface: #ffffff;
    --color-surface-hover: #f5fbff;
    --color-surface-secondary: #f5fbff;

    /* Brand Colors – abgeleitet aus Logo */
    --color-primary: var(--color-brand-blue);
    --color-primary-hover: var(--color-brand-navy);
    --color-secondary: var(--color-brand-cyan);
    --color-tertiary: var(--color-brand-navy);

    /* Logo-Text-Fallback (Buchstaben-Spans, falls Bild-Logo fehlt) */
    --color-logo-letter-blue: var(--color-brand-navy);
    --color-logo-letter-red: var(--color-brand-blue);
    --color-logo-letter-yellow: var(--color-brand-cyan);
    --color-logo-letter-green: var(--color-brand-cyan-light);

    /* Text Colors – Navy-Töne aus Logo */
    --color-text: #0c2d4d;
    --color-text-muted: #1a4a75;
    --color-text-inverse: #ffffff;
    --color-headline: var(--color-brand-navy);

    /* Borders – dezente Blau-Linien */
    --color-border: rgba(0, 112, 192, 0.16);
    --color-border-highlight: rgba(0, 112, 192, 0.32);

    /* Tabellenraster (Div-Table, widgets zentral) */
    --color-table-row-bg: #ffffff;
    --color-table-row-hover-overlay: rgba(0, 181, 226, 0.04);
    --color-primary-soft-bg: rgba(0, 181, 226, 0.08);
    --color-primary-soft-border: rgba(0, 112, 192, 0.22);
    --color-primary-focus-shadow: rgba(0, 112, 192, 0.2);

    /* Status Colors */
    --color-success: #10b981;
    --color-error: #ef4444;
    --color-error-hover: #dc2626;
    --color-error-soft-bg: rgba(239, 68, 68, 0.04);
    --color-error-focus-shadow: rgba(239, 68, 68, 0.15);
    --color-warning: #f59e0b;
    --color-info: var(--color-brand-cyan);

    /* 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: rgba(0, 181, 226, 0.12);
    --color-info-border: rgba(0, 181, 226, 0.35);
    --color-info-text: var(--color-brand-navy);

    /* Home: KI-Klassifizierung (semantisch grün/orange, schwer = Logo-Cyan) */
    --color-classification-easy-border: rgba(16, 185, 129, 0.35);
    --color-classification-easy-bg: rgba(16, 185, 129, 0.06);
    --color-classification-purchased-border: rgba(245, 158, 11, 0.35);
    --color-classification-purchased-bg: rgba(245, 158, 11, 0.06);
    --color-classification-hard-border: rgba(0, 181, 226, 0.4);
    --color-classification-hard-bg: rgba(0, 181, 226, 0.08);

    /* E-Mail-Inline-Styles (kein Zugriff auf :root) – Logo-CI */
    --color-email-link: var(--color-brand-blue);
    --color-email-button-start: var(--color-brand-blue);
    --color-email-button-end: var(--color-brand-navy);

    /* Gradients – Logo-Verlauf Navy → Blau → Cyan */
    --gradient-brand: linear-gradient(135deg, var(--color-brand-navy) 0%, var(--color-brand-blue) 55%, var(--color-brand-cyan) 100%);
    --gradient-text: linear-gradient(to right, var(--color-brand-blue), var(--color-brand-cyan));
    --color-gold-gradient-start: var(--color-brand-navy);
    --color-gold-gradient-mid: var(--color-brand-blue);
    --color-gold-gradient-end: var(--color-brand-cyan);
    --color-gold-text-shadow: rgba(0, 181, 226, 0.3);
    --gradient-gold: linear-gradient(to right, var(--color-gold-gradient-start), var(--color-gold-gradient-mid), var(--color-gold-gradient-end));

    /* Shadows – deaktiviert für rein weißen Seitenhintergrund */
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-glow: none;
}

.base-logo-text-char:nth-child(4n + 1) {
    color: var(--color-logo-letter-blue);
}

.base-logo-text-char:nth-child(4n + 2) {
    color: var(--color-logo-letter-red);
}

.base-logo-text-char:nth-child(4n + 3) {
    color: var(--color-logo-letter-yellow);
}

.base-logo-text-char:nth-child(4n) {
    color: var(--color-logo-letter-green);
}

.base-logo-text-char-space {
    color: transparent;
}