/**
 * Bonivo Design Tokens
 * Quelle: DESIGN-AUDIT.md (Kapitel 8)
 * 
 * Zentrale Token-Ebene: Definiert alle standardisierten CSS-Variablen auf :root
 * sowie typografische Utility-Klassen (.t-*).
 * 
 * WICHTIG: Diese Datei enthält keine generischen Tag-Selektoren, sondern nur
 * CSS-Variablen und Utility-Klassen, um 100%ige Abwärtskompatibilität ohne
 * visuelle Regressionen zu garantieren.
 */

:root {
    /* ==========================================================================
       1. Typografie-Tokens (Kapitel 8.1)
       ========================================================================== */
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Display (Landing / Hero-Titel: 36px / 1.1 / 700) */
    --fs-display: 36px;
    --lh-display: 1.1;
    --fw-display: 700;
    --text-display: 36px / 1.1 / 700;

    /* H1 (Standard Seitenüberschriften: 30px / 1.15 / 600) */
    --fs-h1: 30px;
    --lh-h1: 1.15;
    --fw-h1: 600;
    --text-h1: 30px / 1.15 / 600;

    /* H2 (Section-Titles & Modal-Header: 20px / 1.25 / 600) */
    --fs-h2: 20px;
    --lh-h2: 1.25;
    --fw-h2: 600;
    --text-h2: 20px / 1.25 / 600;

    /* H3 (Card-Titel & Unterabschnitte: 16px / 1.3 / 600) */
    --fs-h3: 16px;
    --lh-h3: 1.3;
    --fw-h3: 600;
    --text-h3: 16px / 1.3 / 600;

    /* Body (Standard-Fließtext & Tabellen: 14px / 1.5 / 400) */
    --fs-body: 14px;
    --lh-body: 1.5;
    --fw-body: 400;
    --text-body: 14px / 1.5 / 400;

    /* Body-SM (Sekundärtexte & Untertitel: 13px / 1.45 / 400) */
    --fs-body-sm: 13px;
    --lh-body-sm: 1.45;
    --fw-body-sm: 400;
    --text-body-sm: 13px / 1.45 / 400;

    /* Caption (Labels & Tabellen-Header: 12px / 1.4 / 500) */
    --fs-caption: 12px;
    --lh-caption: 1.4;
    --fw-caption: 500;
    --text-caption: 12px / 1.4 / 500;

    /* Micro (Badges, Tags, Kicker: 11px / 1.3 / 700) */
    --fs-micro: 11px;
    --lh-micro: 1.3;
    --fw-micro: 700;
    --text-micro: 11px / 1.3 / 700;

    /* ==========================================================================
       2. Farb-Tokens (Kapitel 8.1 & 8.5)
       ========================================================================== */
    /* Textfarben */
    --color-text-strong: #111827;
    --color-text: #374151;
    --color-text-muted: #6b7280;
    --color-text-caption: #78716c;
    --color-text-micro: #9ca3af;

    /* Semantische Feedback-Sets (Success / Error / Warning / Info) */
    /* Success */
    --color-success-bg: #f0fdf4;
    --color-success-border: #bbf7d0;
    --color-success-text: #166534;
    --color-success-icon: #15803d;

    /* Error / Danger */
    --color-error-bg: #fef2f2;
    --color-error-border: #fecaca;
    --color-error-text: #991b1b;
    --color-error-icon: #dc2626;

    /* Warning */
    --color-warning-bg: #fffbeb;
    --color-warning-border: #fde68a;
    --color-warning-text: #92400e;
    --color-warning-icon: #d97706;

    /* Info */
    --color-info-bg: #eff6ff;
    --color-info-border: #bfdbfe;
    --color-info-text: #1e40af;
    --color-info-icon: #2563eb;

    /* ==========================================================================
       3. Layout-, Radius-, Padding- & Shadow-Tokens (Kapitel 8.3 & 8.4)
       ========================================================================== */
    /* Radien */
    --radius-panel: 20px;
    --radius-card: 14px;
    --radius-inner: 10px;
    --radius-modal: 16px;

    /* Paddings */
    --padding-panel: 24px;
    --padding-card: 18px;
    --padding-inner: 14px;
    --padding-modal: 24px;
    --padding-modal-header: 20px 24px 16px;
    --padding-modal-body: 20px 24px;
    --padding-modal-footer: 16px 24px;

    /* Schatten */
    --shadow-panel: 0 4px 20px rgba(0, 0, 0, 0.04);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.03);
    --shadow-modal: 0 20px 60px rgba(17, 24, 39, 0.16);
    --shadow-toast: 0 10px 25px rgba(0, 0, 0, 0.1);

    /* Modal-Breiten */
    --modal-sm: 440px;
    --modal-md: 620px;
    --modal-lg: 840px;
    --modal-xl: 1140px;

    /* ==========================================================================
       4. Button-Tokens (Kapitel 8.2)
       ========================================================================== */
    /* Small Button (sm) */
    --btn-height-sm: 32px;
    --btn-padding-sm: 0 10px;
    --btn-fs-sm: 12px;
    --btn-radius-sm: 8px;
    --btn-fw-sm: 600;

    /* Medium Button (md - DEFAULT) */
    --btn-height-md: 42px;
    --btn-padding-md: 0 16px;
    --btn-fs-md: 13px;
    --btn-radius-md: 10px;
    --btn-fw-md: 600;

    /* Large Button (lg) */
    --btn-height-lg: 48px;
    --btn-padding-lg: 0 20px;
    --btn-fs-lg: 14px;
    --btn-radius-lg: 12px;
    --btn-fw-lg: 700;

    /* Button Farbvarianten */
    --btn-primary-bg: #111827;
    --btn-primary-text: #ffffff;
    --btn-primary-border: transparent;

    --btn-secondary-bg: #ffffff;
    --btn-secondary-border: #e5e7eb;
    --btn-secondary-text: #1f2937;
    --btn-secondary-hover-bg: #f9fafb;

    --btn-destructive-bg: #fef2f2;
    --btn-destructive-border: #fecaca;
    --btn-destructive-text: #dc2626;

    --btn-ghost-bg: transparent;
    --btn-ghost-text: #4b5563;
}

/* ==========================================================================
   5. Mobile-Überschreibungen (Kapitel 8.1)
   ========================================================================== */
@media (max-width: 560px) {
    :root {
        --fs-h1: 24px;
        --text-h1: 24px / 1.15 / 600;
    }
}

/* ==========================================================================
   6. Typografie Utility-Klassen (Kapitel 8.1)
   ========================================================================== */
.t-display {
    font-size: var(--fs-display) !important;
    line-height: var(--lh-display) !important;
    font-weight: var(--fw-display) !important;
}

.t-h1 {
    font-size: var(--fs-h1) !important;
    line-height: var(--lh-h1) !important;
    font-weight: var(--fw-h1) !important;
}

.t-h2 {
    font-size: var(--fs-h2) !important;
    line-height: var(--lh-h2) !important;
    font-weight: var(--fw-h2) !important;
}

.t-h3 {
    font-size: var(--fs-h3) !important;
    line-height: var(--lh-h3) !important;
    font-weight: var(--fw-h3) !important;
}

.t-body {
    font-size: var(--fs-body) !important;
    line-height: var(--lh-body) !important;
    font-weight: var(--fw-body) !important;
}

.t-body-sm {
    font-size: var(--fs-body-sm) !important;
    line-height: var(--lh-body-sm) !important;
    font-weight: var(--fw-body-sm) !important;
}

.t-caption {
    font-size: var(--fs-caption) !important;
    line-height: var(--lh-caption) !important;
    font-weight: var(--fw-caption) !important;
}

.t-micro {
    font-size: var(--fs-micro) !important;
    line-height: var(--lh-micro) !important;
    font-weight: var(--fw-micro) !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}