/*
 * DZKB UI · tokens.css
 * ------------------------------------------------------------------
 * Die EINZIGE Stelle, an der Farben, Abstände, Radien, Schatten und
 * Schriftgrößen definiert werden. Alle Apps (Prüfungsverwaltung,
 * Prüfungstrainer, Eventmanager …) laden diese Datei von
 * https://dzkb.bayern/ui/tokens.css
 *
 * Regel: In keiner App-CSS steht ein Hex-Farbwert. Wer eine Farbe
 * braucht, nimmt eine Variable von hier. Fehlt eine, wird sie HIER
 * ergänzt – nicht in der App.
 *
 * Reihenfolge der Ebenen (Layer): spätere Ebenen gewinnen immer,
 * unabhängig von der Spezifität. "legacy" ist die Übergangsebene für
 * altes App-CSS, das noch nicht umgestellt ist: Es liegt unter den
 * zentralen Bausteinen und kann sie deshalb nie überschreiben. Deshalb braucht keine App ein "important".
 */
@layer ui-tokens, ui-base, legacy, ui-components, app;

@layer ui-tokens {
  :root {
    /* ---- Marke ---- */
    --dzkb-brand-700: #07518d;
    --dzkb-brand-600: #0879b9;
    --dzkb-brand-500: #0e84c3;
    --dzkb-accent-cyan: #4db8e7;

    /* ---- Text ---- */
    --dzkb-text: #073c5f;
    --dzkb-text-strong: #0f2f46;
    --dzkb-text-muted: #55768b;
    --dzkb-text-on-brand: #fff;

    /* ---- Flächen ---- */
    --dzkb-page: #f4fafd;
    --dzkb-surface: #fff;
    --dzkb-surface-soft: #f8fdff;
    --dzkb-surface-glass: rgba(255, 255, 255, .96);
    --dzkb-row-hover: #f7fcfe;
    --dzkb-border: #d7e9f2;
    --dzkb-border-strong: #c3d9e6;
    --dzkb-border-active: #7cc8ea;
    --dzkb-divider: #e8f0f4;
    --dzkb-overlay: rgba(6, 47, 83, .58);

    /* ---- Bedeutungsfarben: immer als Dreiklang soft / border / text ---- */
    --dzkb-info-soft: #eaf7fd;
    --dzkb-info-border: #bee2f4;
    --dzkb-info-text: #076b9f;

    --dzkb-success-soft: #eaf8f1;
    --dzkb-success-border: #bfe7d1;
    --dzkb-success-text: #17704a;
    --dzkb-success-solid: #1f8a5b;

    --dzkb-warning-soft: #fff7e6;
    --dzkb-warning-border: #f2d79e;
    --dzkb-warning-text: #8a5a00;
    --dzkb-warning-solid: #d9a514;

    --dzkb-danger-soft: #fff0f1;
    --dzkb-danger-border: #f1c1c6;
    --dzkb-danger-text: #b32636;
    --dzkb-danger-solid: #c53040;

    --dzkb-neutral-soft: #f1f5f8;
    --dzkb-neutral-border: #d7e0e7;
    --dzkb-neutral-text: #4f6170;

    --dzkb-special-soft: #f3efff;
    --dzkb-special-border: #d8cef8;
    --dzkb-special-text: #6447a6;

    --dzkb-teal-soft: #edf9f7;
    --dzkb-teal-border: #c3e5de;
    --dzkb-teal-text: #147267;

    /* ---- Seitenleiste (dunkel) ---- */
    --dzkb-sidebar-bg: linear-gradient(180deg, #06365e 0%, #052e50 100%);
    --dzkb-sidebar-text: #dbeeff;
    --dzkb-sidebar-text-strong: #fff;
    --dzkb-sidebar-muted: #9cc3dc;
    --dzkb-sidebar-hover: rgba(255, 255, 255, .08);
    --dzkb-sidebar-active: rgba(200, 238, 255, .16);
    --dzkb-sidebar-border: rgba(200, 238, 255, .2);
    --dzkb-sidebar-chip: #c8eeff;

    /* ---- Verläufe ---- */
    --dzkb-gradient-brand: linear-gradient(135deg, #07518d 0%, #0879b9 100%);
    --dzkb-gradient-accent: linear-gradient(90deg, #0e84c3 0%, #4db8e7 100%);
    --dzkb-gradient-panel: linear-gradient(135deg, #f4fbfe 0%, #eef8fd 52%, #fbfeff 100%);
    --dzkb-gradient-info: linear-gradient(135deg, #eef8fd 0%, #fff 100%);
    --dzkb-gradient-mint: linear-gradient(135deg, #effaf6 0%, #fbfffd 100%);
    --dzkb-gradient-lavender: linear-gradient(135deg, #f3f0ff 0%, #fff 100%);

    /* ---- Schrift ---- */
    --dzkb-font: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, Helvetica, sans-serif;
    --dzkb-font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
    --dzkb-text-xs: .72rem;
    --dzkb-text-sm: .82rem;
    --dzkb-text-md: .92rem;
    --dzkb-text-lg: 1.12rem;
    --dzkb-text-xl: 1.45rem;
    --dzkb-text-2xl: 1.75rem;

    /* ---- Abstände ---- */
    --dzkb-space-1: 4px;
    --dzkb-space-2: 8px;
    --dzkb-space-3: 12px;
    --dzkb-space-4: 16px;
    --dzkb-space-5: 24px;
    --dzkb-space-6: 32px;

    /* ---- Radien ---- */
    --dzkb-radius-xs: 6px;
    --dzkb-radius-sm: 8px;
    --dzkb-radius-md: 10px;
    --dzkb-radius-lg: 12px;
    --dzkb-radius-pill: 999px;

    /* ---- Feste Höhen: Buttons, Felder und Tags sind überall gleich hoch ---- */
    --dzkb-height-tag: 24px;
    --dzkb-height-button-sm: 30px;
    --dzkb-height-button: 36px;
    --dzkb-height-button-lg: 42px;
    --dzkb-height-field: 40px;

    /* ---- Schatten ---- */
    --dzkb-shadow-sm: 0 6px 14px rgba(6, 86, 129, .05);
    --dzkb-shadow-md: 0 10px 22px rgba(6, 86, 129, .07);
    --dzkb-shadow-lg: 0 24px 70px rgba(0, 32, 58, .28);
    --dzkb-shadow-up: 0 -6px 18px rgba(6, 86, 129, .06);
    --dzkb-focus-ring: 0 0 0 3px rgba(77, 184, 231, .38);

    /* ---- Bewegung ---- */
    --dzkb-ease: cubic-bezier(.2, .7, .2, 1);
    --dzkb-duration: 160ms;

    /* ---- Layout ---- */
    --dzkb-content-width: 1360px;
    --dzkb-gutter: 24px;
    --dzkb-topbar-height: 69px;
    --dzkb-sidebar-width: 232px;
  }

  @media (max-width: 760px) {
    :root { --dzkb-gutter: 14px; --dzkb-topbar-height: 59px; }
  }
}