/* ==========================================================================
   WebNova CMS — Design-Tokens
   Einzige Quelle aller Design-Werte. Keine Farben, Abstände oder Radien
   außerhalb dieser Datei definieren.
   ========================================================================== */

:root {
  /* ── Oberflächen ── */
  --color-bg-sidebar:       #0f0f0f;
  --color-bg-app:           #1a1a1a;
  --color-bg-card:          #242424;
  --color-bg-input:         #2d2d2d;
  --color-bg-hover:         #2f2f2f;
  --color-border:           #333333;
  --color-border-subtle:    #2a2a2a;

  /* ── Text ── */
  --color-text-primary:     #ffffff;
  --color-text-secondary:   #a0a0a0;
  --color-text-muted:       #666666;
  --color-text-inverse:     #0f0f0f;

  /* ── Akzent (WebNova Markenfarbe) ── */
  --color-accent:           #1cced8;
  --color-accent-hover:     #17b8c1;
  --color-accent-subtle:    rgba(28, 206, 216, 0.12);
  --color-accent-border:    rgba(28, 206, 216, 0.30);

  /* ── Semantische Zustände ── */
  --color-success:          #22c55e;
  --color-success-subtle:   rgba(34, 197, 94, 0.12);
  --color-warning:          #f59e0b;
  --color-warning-subtle:   rgba(245, 158, 11, 0.12);
  --color-danger:           #ef4444;
  --color-danger-subtle:    rgba(239, 68, 68, 0.12);
  --color-info:             #3b82f6;
  --color-info-subtle:      rgba(59, 130, 246, 0.12);

  /* ── Typografie ── */
  --font-base:              "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                            Roboto, Helvetica, Arial, sans-serif;
  --font-mono:              "SF Mono", "Fira Code", "Fira Mono", monospace;

  --fs-xs:                  11px;
  --fs-sm:                  13px;
  --fs-base:                14px;
  --fs-md:                  15px;
  --fs-lg:                  18px;
  --fs-xl:                  22px;
  --fs-2xl:                 28px;
  --fs-3xl:                 36px;

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

  --lh-tight:               1.25;
  --lh-base:                1.5;
  --lh-relaxed:             1.75;

  /* ── Layout ── */
  --sidebar-width:          220px;
  --header-height:          75px;
  --content-max-width:      1100px;

  /* ── Abstände ── */
  --space-1:                4px;
  --space-2:                8px;
  --space-3:                12px;
  --space-4:                16px;
  --space-5:                20px;
  --space-6:                24px;
  --space-8:                32px;
  --space-10:               40px;
  --space-12:               48px;
  --space-16:               64px;

  /* ── Radien ── */
  --radius-sm:              4px;
  --radius-md:              6px;
  --radius-lg:              8px;
  --radius-xl:              12px;
  --radius-full:            9999px;

  /* ── Schatten ── */
  --shadow-card:            0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-modal:           0 8px 32px rgba(0, 0, 0, 0.6);
  --shadow-dropdown:        0 4px 16px rgba(0, 0, 0, 0.5);

  /* ── Z-Index-Ebenen ── */
  --z-sidebar:              100;
  --z-header:               90;
  --z-dropdown:             200;
  --z-modal:                300;
  --z-toast:                400;

  /* ── Übergänge ── */
  --transition-fast:        150ms ease;
  --transition-base:        200ms ease;
  --transition-slow:        300ms ease;
}