/* ==========================================================================
   theme.css — Design Tokens (Light + Dark), bridged für alle Naming-Konventionen
   ========================================================================== */

:root {
  /* Layout-Konstanten — verfügbar in allen Themes.
     Höhe des App-Headers (fixed) — wird als padding-top am body genutzt,
     damit Content nicht unter dem Header verschwindet. */
  --app-header-h: 64px;
}
@media (max-width: 768px) {
  :root {
    --app-header-h: 56px;
  }
}

:root,
[data-theme="light"] {
  /* Surface & Background */
  --bg:                       #f6f7f9;
  --bg-elevated:              #ffffff;
  --bg-muted:                 #eef0f3;
  --color-bg:                 #f6f7f9;
  --color-bg-elevated:        #ffffff;
  --color-surface:            #ffffff;
  --color-surface-hover:      #f1f3f5;
  --color-surface-active:     #e8eaee;
  --color-surface-muted:      #eef0f3;

  /* Text */
  --fg:                       #1a1d23;
  --fg-muted:                 #5a6068;
  --fg-subtle:                #868e96;
  --color-fg:                 #1a1d23;
  --color-fg-muted:           #5a6068;
  --color-text:               #1a1d23;
  --color-text-muted:         #5a6068;
  --color-text-placeholder:   #8a919a;
  --color-muted:              #868e96;

  /* Borders */
  --border:                   #d8dce2;
  --border-strong:            #c0c6cf;
  --color-border:             #d8dce2;
  --color-border-hover:       #c0c6cf;

  /* Primary */
  --primary:                  #2563eb;
  --primary-hover:            #1d4ed8;
  --primary-fg:               #ffffff;
  --color-primary:            #2563eb;
  --color-primary-hover:      #1d4ed8;
  --color-primary-active:     #1e40af;
  --color-primary-light:      #dbeafe;
  --color-primary-contrast:   #ffffff;
  --color-on-accent:          #ffffff;

  /* Accent */
  --color-accent:             #2563eb;
  --color-accent-hover:       #1d4ed8;

  /* Secondary */
  --color-secondary:          #eef0f3;
  --color-secondary-hover:    #e3e6ec;
  --color-secondary-active:   #d4d8e0;
  --color-secondary-contrast: #1a1d23;

  /* Status — Success */
  --success:                  #10b981;
  --color-success:            #10b981;
  --color-success-bg:         #ecfdf5;
  --color-success-border:     #6ee7b7;
  --color-success-text:       #065f46;

  /* Status — Warning */
  --warning:                  #f59e0b;
  --color-warning:            #f59e0b;
  --color-warning-bg:         #fffbeb;
  --color-warning-border:     #fcd34d;
  --color-warning-text:       #92400e;

  /* Status — Danger */
  --danger:                   #ef4444;
  --color-danger:             #ef4444;
  --color-danger-hover:       #dc2626;
  --color-danger-active:      #b91c1c;
  --color-danger-bg:          #fef2f2;
  --color-danger-border:      #fca5a5;
  --color-danger-text:        #991b1b;
  --color-danger-contrast:    #ffffff;
  --color-danger-ring:        rgba(239, 68, 68, 0.4);

  /* Status — Info */
  --color-info-bg:            #eff6ff;
  --color-info-border:        #93c5fd;
  --color-info-text:          #1e40af;

  /* Hover / Focus / Skeleton */
  --color-hover:              rgba(0, 0, 0, 0.04);
  --color-focus:              #2563eb;
  --color-focus-ring:         rgba(37, 99, 235, 0.35);
  --color-skeleton-shimmer:   rgba(255, 255, 255, 0.6);

  /* Shadows */
  --shadow-sm:                0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md:                0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg:                0 12px 28px rgba(15, 23, 42, 0.12);
}

[data-theme="dark"] {
  --bg:                       #0f1115;
  --bg-elevated:              #181c23;
  --bg-muted:                 #1f242c;
  --color-bg:                 #0f1115;
  --color-bg-elevated:        #181c23;
  --color-surface:            #181c23;
  --color-surface-hover:      #20252e;
  --color-surface-active:     #272d38;
  --color-surface-muted:      #1f242c;

  --fg:                       #f1f3f5;
  --fg-muted:                 #c1c7d0;
  --fg-subtle:                #8a919a;
  --color-fg:                 #f1f3f5;
  --color-fg-muted:           #c1c7d0;
  --color-text:               #f1f3f5;
  --color-text-muted:         #c1c7d0;
  --color-text-placeholder:   #6b727c;
  --color-muted:              #8a919a;

  --border:                   #2d323a;
  --border-strong:            #3d434c;
  --color-border:             #2d323a;
  --color-border-hover:       #3d434c;

  --primary:                  #60a5fa;
  --primary-hover:            #93c5fd;
  --primary-fg:               #0f1115;
  --color-primary:            #60a5fa;
  --color-primary-hover:      #93c5fd;
  --color-primary-active:     #bfdbfe;
  --color-primary-light:      #1e3a8a;
  --color-primary-contrast:   #0f1115;
  --color-on-accent:          #0f1115;

  --color-accent:             #60a5fa;
  --color-accent-hover:       #93c5fd;

  --color-secondary:          #272d38;
  --color-secondary-hover:    #2f3642;
  --color-secondary-active:   #38404d;
  --color-secondary-contrast: #f1f3f5;

  --success:                  #4ade80;
  --color-success:            #4ade80;
  --color-success-bg:         #052e1a;
  --color-success-border:     #16a34a;
  --color-success-text:       #86efac;

  --warning:                  #fbbf24;
  --color-warning:            #fbbf24;
  --color-warning-bg:         #2c1f04;
  --color-warning-border:     #d97706;
  --color-warning-text:       #fcd34d;

  --danger:                   #f87171;
  --color-danger:             #f87171;
  --color-danger-hover:       #ef4444;
  --color-danger-active:      #dc2626;
  --color-danger-bg:          #2a0e10;
  --color-danger-border:      #b91c1c;
  --color-danger-text:        #fca5a5;
  --color-danger-contrast:    #0f1115;
  --color-danger-ring:        rgba(248, 113, 113, 0.45);

  --color-info-bg:            #0c1d34;
  --color-info-border:        #1d4ed8;
  --color-info-text:          #93c5fd;

  --color-hover:              rgba(255, 255, 255, 0.06);
  --color-focus:              #60a5fa;
  --color-focus-ring:         rgba(96, 165, 250, 0.4);
  --color-skeleton-shimmer:   rgba(255, 255, 255, 0.08);

  --shadow-sm:                0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md:                0 4px 12px rgba(0, 0, 0, 0.55);
  --shadow-lg:                0 12px 28px rgba(0, 0, 0, 0.6);
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"],
  :root:not([data-theme]) {
    --bg:                       #0f1115;
    --bg-elevated:              #181c23;
    --bg-muted:                 #1f242c;
    --color-bg:                 #0f1115;
    --color-bg-elevated:        #181c23;
    --color-surface:            #181c23;
    --color-surface-hover:      #20252e;
    --color-surface-active:     #272d38;
    --color-surface-muted:      #1f242c;

    --fg:                       #f1f3f5;
    --fg-muted:                 #c1c7d0;
    --fg-subtle:                #8a919a;
    --color-fg:                 #f1f3f5;
    --color-fg-muted:           #c1c7d0;
    --color-text:               #f1f3f5;
    --color-text-muted:         #c1c7d0;
    --color-text-placeholder:   #6b727c;
    --color-muted:              #8a919a;

    --border:                   #2d323a;
    --border-strong:            #3d434c;
    --color-border:             #2d323a;
    --color-border-hover:       #3d434c;

    --primary:                  #60a5fa;
    --primary-hover:            #93c5fd;
    --primary-fg:               #0f1115;
    --color-primary:            #60a5fa;
    --color-primary-hover:      #93c5fd;
    --color-primary-active:     #bfdbfe;
    --color-primary-light:      #1e3a8a;
    --color-primary-contrast:   #0f1115;
    --color-on-accent:          #0f1115;

    --color-accent:             #60a5fa;
    --color-accent-hover:       #93c5fd;

    --color-secondary:          #272d38;
    --color-secondary-hover:    #2f3642;
    --color-secondary-active:   #38404d;
    --color-secondary-contrast: #f1f3f5;

    --success:                  #4ade80;
    --color-success:            #4ade80;
    --color-success-bg:         #052e1a;
    --color-success-border:     #16a34a;
    --color-success-text:       #86efac;

    --warning:                  #fbbf24;
    --color-warning:            #fbbf24;
    --color-warning-bg:         #2c1f04;
    --color-warning-border:     #d97706;
    --color-warning-text:       #fcd34d;

    --danger:                   #f87171;
    --color-danger:             #f87171;
    --color-danger-hover:       #ef4444;
    --color-danger-active:      #dc2626;
    --color-danger-bg:          #2a0e10;
    --color-danger-border:      #b91c1c;
    --color-danger-text:        #fca5a5;
    --color-danger-contrast:    #0f1115;
    --color-danger-ring:        rgba(248, 113, 113, 0.45);

    --color-info-bg:            #0c1d34;
    --color-info-border:        #1d4ed8;
    --color-info-text:          #93c5fd;

    --color-hover:              rgba(255, 255, 255, 0.06);
    --color-focus:              #60a5fa;
    --color-focus-ring:         rgba(96, 165, 250, 0.4);
    --color-skeleton-shimmer:   rgba(255, 255, 255, 0.08);

    --shadow-sm:                0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md:                0 4px 12px rgba(0, 0, 0, 0.55);
    --shadow-lg:                0 12px 28px rgba(0, 0, 0, 0.6);
  }
}

/* ==========================================================================
   Erweiterte Tokens — Spacing, Radius, Typography, Transitions, Z-Index
   (Ergänzung der bestehenden Variablen, nicht Umbau)
   ========================================================================== */
:root,
[data-theme="light"],
[data-theme="dark"],
[data-theme="auto"] {
  /* Spacing-Skala */
  --space-2xs:           0.125rem;  /*  2px */
  --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 */

  /* Numerische Spacing-Aliase (kompatibel zu space-1..8) */
  --space-1:             0.25rem;
  --space-2:             0.5rem;
  --space-3:             0.75rem;
  --space-4:             1rem;
  --space-5:             1.25rem;
  --space-6:             1.5rem;
  --space-8:             2rem;

  /* Border-Radius */
  --radius-xs:           0.125rem;  /*  2px */
  --radius-sm:           0.375rem;  /*  6px */
  --radius-md:           0.5rem;    /*  8px */
  --radius-lg:           0.75rem;   /* 12px */
  --radius-xl:           1rem;      /* 16px */
  --radius-2xl:          1.5rem;    /* 24px */
  --radius-full:         9999px;

  /* Font-Weights */
  --font-weight-normal:    400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;

  /* Font-Sizes */
  --font-size-xs:        0.75rem;   /* 12px */
  --font-size-sm:        0.875rem;  /* 14px */
  --font-size-md:        1rem;      /* 16px */
  --font-size-lg:        1.125rem;  /* 18px */
  --font-size-xl:        1.25rem;   /* 20px */
  --font-size-2xl:       1.5rem;    /* 24px */
  --font-size-3xl:       2rem;      /* 32px */

  /* Line-Heights */
  --line-height-tight:   1.25;
  --line-height-snug:    1.35;
  --line-height-base:    1.5;
  --line-height-relaxed: 1.65;

  /* Schatten — Ergänzungen */
  --shadow-xs:           0 1px 1px rgba(15, 23, 42, 0.04);
  --shadow-focus:        0 0 0 3px var(--color-focus-ring);

  /* Transitions */
  --transition-fast:     150ms ease;
  --transition-base:     200ms ease;
  --transition-slow:     300ms ease;

  /* Z-Index-Skala */
  --z-base:              1;
  --z-dropdown:          100;
  --z-sticky:            200;
  --z-overlay:           500;
  --z-modal:             1000;
  --z-popover:           1100;
  --z-toast:             1200;
  --z-tooltip:           1300;
}

[data-font-size="small"]  { --font-size-base: 14px; }
[data-font-size="medium"] { --font-size-base: 16px; }
[data-font-size="large"]  { --font-size-base: 18px; }

html {
  font-size: var(--font-size-base, 16px);
}

body {
  background-color: var(--bg);
  color: var(--fg);
  transition: background-color 0.2s ease, color 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
}