@charset "utf-8";

/* ==========================================================================
   Quantiz® UI-Tokens — gemeinsame Design-Grundlage der UX-Komponenten
   --------------------------------------------------------------------------
   Übernommen aus dem Referenzdesign (docs/design/project/mc/tokens.css).
   Die Farbwerte entsprechen 1:1 dem bestehenden Farbprofil aus
   basic_components.css (--highlight_1 … --highlight_5, --dark/--medium/--bright);
   sie werden hier zusätzlich unter den Token-Namen des Designsystems
   bereitgestellt, damit die neuen Komponenten eigenständig funktionieren.
   ========================================================================== */

:root {
    /* ── Farbprofil ────────────────────────────────────────────────────── */
    --q-black:        #000000;
    --q-white:        #FFFFFF;

    --q-dark:         #4B4B4B; /* Primärtext auf Weiß */
    --q-medium:       #BBBBBB; /* Sekundärtext, Rahmen */
    --q-bright:       #E7E7E7; /* feine Trennlinien */

    --q-highlight-1:  #C6D31C; /* Quantiz-Limette — Primärmarke */
    --q-highlight-2:  #10314E; /* tiefes Navy — Akzent / Link */
    --q-highlight-3:  #15A5B5; /* Petrol — Überschriften, Fokus */
    --q-highlight-4:  #F1F2F2; /* Off-White / Flächen-Wash */
    --q-highlight-5:  #8A1CB1; /* Violett — sehr sparsam */

    /* Semantische Aliase */
    --fg-1:           var(--q-dark);
    --fg-2:           var(--q-medium);
    --fg-on-dark:     var(--q-white);
    --link:           var(--q-highlight-2);
    --link-hover:     var(--q-highlight-3);
    --brand:          var(--q-highlight-1);
    --brand-dark:     var(--q-highlight-2);
    --brand-dark-deep:#0A253C;
    --accent:         var(--q-highlight-3);
    --surface:        var(--q-white);
    --surface-soft:   var(--q-highlight-4);
    --surface-muted:  var(--q-bright);
    --divider:        var(--q-bright);
    --focus-ring:     var(--q-highlight-3);

    /* Status */
    --success:        #6FA31C;
    --warning:        #E2A93B;
    --danger:         #C04848;
    --info:           var(--q-highlight-3);

    --status-ok-soft:     #EEF5DC;
    --status-warn-soft:   #FBF1D8;
    --status-crit-soft:   #F8E0E0;
    --status-prep-soft:   #DBE2EA;
    --status-done-soft:   #ECECEC;
    --status-ok-ink:      #5C7A12;
    --status-warn-ink:    #B0801E;
    --status-crit-border: #F0C0C0;

    /* ── Typografie ───────────────────────────────────────────────────── */
    --font-sans:      'Museo Sans', 'Helvetica Neue', Arial, sans-serif;
    --font-display:   'Comfortaa', 'Museo Sans', Arial, sans-serif;
    --font-mono:      ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    --w-light:   300;
    --w-regular: 500;
    --w-medium:  500;
    --w-bold:    700;

    --fs-12:  0.75rem;
    --fs-14:  0.875rem;
    --fs-16:  1rem;
    --fs-18:  1.125rem;
    --fs-20:  1.25rem;
    --fs-24:  1.5rem;
    --fs-28:  1.75rem;
    --fs-32:  2rem;
    --fs-40:  2.5rem;
    --fs-48:  3rem;

    --lh-tight:  1.2;
    --lh-snug:   1.35;
    --lh-normal: 1.5;

    --tracking-tight:  -0.01em;
    --tracking-wide:   0.05em;
    --tracking-xwide:  0.10em;

    /* ── Radien & Abstände ────────────────────────────────────────────── */
    --radius-xs:  4px;
    --radius-sm:  8px;
    --radius-md:  16px;
    --radius-lg:  24px;
    --radius-xl:  40px;   /* Marken-Radius (entspricht --config_border_radius) */
    --radius-pill: 999px;
    --radius-circle: 50%;

    /* ── Elevation ────────────────────────────────────────────────────── */
    --shadow-card:    0 0 12px 0 rgba(0, 0, 0, 0.20);
    --shadow-soft:    0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-elev:    0 0 6px 6px rgba(0, 0, 0, 0.20);
    --shadow-focus:   0 0 0 3px rgba(21, 165, 181, 0.35);

    /* ── Motion ───────────────────────────────────────────────────────── */
    --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-std:  cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast:  150ms;
    --dur-base:  300ms;
    --dur-slow:  600ms;
}

/* ── Element-Grundeinstellungen ───────────────────────────────────────── */

/* Border-Box wie im Referenzdesign — Voraussetzung aller UX-Komponenten
   (Eingabefelder mit width:100% + Innenabstand dürfen nicht überlaufen) */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Registered-Superscript — für Quantiz® */
.registered {
    font-size: 0.5em;
    vertical-align: super;
    line-height: 0;
}