/**
 * KOL Web App — Design System v1
 *
 * Single-Source-of-Truth für Design-Tokens (Farben, Spacing, Typo, Shadows)
 * und Theme-Classes (kontextabhängige Akzentfarben).
 *
 * Diese Datei definiert NUR Custom Properties. Sie hat KEINEN visuellen
 * Effekt auf bestehende Pages. Komponenten in Phase 2 lesen die Tokens
 * via var(--token-name).
 *
 * Doku: /docs/design-system.md
 */


/* ─────────────────────────────────────────────────────────────────────────
   1. Foundation Tokens — global, immer verfügbar
   ───────────────────────────────────────────────────────────────────────── */

:root {

    /* — Brand & Surface — */
    --color-brand:           #0d3b66;
    --color-brand-bright:    #0d6efd;
    --color-surface:         #ffffff;
    --color-app-bg:          #f8f9fa;
    --color-border:          rgba(0, 0, 0, 0.06);

    /* — Text — */
    --color-text:            #212529;
    --color-text-muted:      #6c757d;
    --color-text-soft:       #adb5bd;

    /* — Semantic — */
    --color-success:         #198754;
    --color-warning:         #fd7e14;
    --color-danger:          #dc3545;
    --color-info:            #0dcaf0;

    /* — Default Akzent (greift wenn keine theme-* Class aktiv) — */
    --accent-mid:            var(--color-brand-bright);
    --accent-bg:             #e7f1ff;
    --accent-emphasis:       #0a58ca;

    /* — Typografie — */
    --font-sans:             "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono:             "JetBrains Mono", "SF Mono", Menlo, Monaco, Consolas, monospace;

    --text-xs:               0.75rem;     /* 12px */
    --text-sm:               0.875rem;    /* 14px */
    --text-base:             1rem;        /* 16px */
    --text-lg:               1.125rem;    /* 18px */
    --text-xl:               1.25rem;     /* 20px */
    --text-2xl:              1.5rem;      /* 24px */
    --text-3xl:              1.875rem;    /* 30px */
    --text-4xl:              2.25rem;     /* 36px */
    --text-5xl:              3rem;        /* 48px */

    --leading-tight:         1.2;
    --leading-snug:          1.4;
    --leading-normal:        1.5;
    --leading-relaxed:       1.625;

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

    --tracking-tight:        -0.01em;
    --tracking-normal:       0;
    --tracking-wide:         0.05em;

    /* — Spacing (4px-Base) — */
    --space-xs:              0.25rem;     /* 4px */
    --space-sm:              0.5rem;      /* 8px */
    --space-md:              1rem;        /* 16px */
    --space-lg:              1.5rem;      /* 24px */
    --space-xl:              2rem;        /* 32px */
    --space-2xl:             3rem;        /* 48px */
    --space-3xl:             4rem;        /* 64px */
    --space-4xl:             6rem;        /* 96px */

    /* — Border-Radius — */
    --radius-sm:             6px;
    --radius-md:             10px;
    --radius-lg:             16px;
    --radius-pill:           9999px;

    /* — Shadows — */
    --shadow-xs:             0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm:             0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md:             0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg:             0 8px 32px rgba(0, 0, 0, 0.10);

    /* — Icon-Sizes — */
    --icon-sm:               14px;
    --icon-md:               18px;
    --icon-lg:               24px;
    --icon-xl:               36px;

    /* — Transition-Defaults — */
    --transition-fast:       0.15s ease;
    --transition-base:       0.2s ease;
    --transition-slow:       0.3s ease;

    /* — Z-Index Layer — */
    --z-base:                1;
    --z-dropdown:            1000;
    --z-sticky:              1020;
    --z-modal-backdrop:      1040;
    --z-modal:               1050;
    --z-tooltip:             1070;
}


/* ─────────────────────────────────────────────────────────────────────────
   2. Produkt-Themes — setzen Akzent-Tokens kontextabhängig
   ───────────────────────────────────────────────────────────────────────── */

/**
 * Anwendung: Theme-Class auf Page-Root oder Section-Root setzen.
 *
 * <div class="theme-kol">
 *     <section class="hero">…</section>      ← liest --accent-mid
 *     <div class="stat">…</div>              ← liest --accent-mid
 * </div>
 *
 * Verschachtelte Themes erlaubt — innere überschreibt äußere.
 */

.theme-kol {
    /* Deep Teal — clean, medizinisch-professional, distinct vom Clinics-Blau.
       Hinweis: Congress-Theme nutzt Cyan (#0dcaf0), das ist verwandt aber
       deutlich heller — Verwechslungs-Risiko bei direkter Nachbarschaft. */
    --accent-mid:            #0a7c8c;
    --accent-bg:             #cdf2f6;
    --accent-emphasis:       #055766;
}

.theme-market {
    --accent-mid:            #198754;
    --accent-bg:             #e7f5ee;
    --accent-emphasis:       #0f5132;
}

.theme-clinics {
    --accent-mid:            #0d6efd;
    --accent-bg:             #e7f1ff;
    --accent-emphasis:       #0a58ca;
}

.theme-patents {
    --accent-mid:            #fd7e14;
    --accent-bg:             #fff3e6;
    --accent-emphasis:       #cc6510;
}

.theme-congress {
    --accent-mid:            #0dcaf0;
    --accent-bg:             #e6fbff;
    --accent-emphasis:       #0a9bbf;
}

.theme-admin {
    --accent-mid:            #dc3545;
    --accent-bg:             #fde7ea;
    --accent-emphasis:       #a71d2a;
}


/* ─────────────────────────────────────────────────────────────────────────
   3. Reserved Namespace
   ───────────────────────────────────────────────────────────────────────── */

/**
 * Komponenten-Klassen kommen in Phase 2:
 *
 *   /static/css/components/card.css
 *   /static/css/components/stat.css
 *   /static/css/components/badge.css
 *   /static/css/components/hero.css
 *   /static/css/components/tabs.css
 *   /static/css/components/table.css
 *   /static/css/components/button.css
 *
 * Convention:
 *   .kol-{component}                 → Container
 *   .kol-{component}__{element}      → BEM-Element
 *   .kol-{component}--{modifier}     → BEM-Modifier
 *
 * Beispiel:
 *   .kol-card
 *   .kol-card__header
 *   .kol-card--featured
 */