/* ─────────────────────────────────────────────────────────────────────────────
   CLPZ Design System — CSS Custom Properties
   Einzige Quelle der Wahrheit für alle Farben, Spacing, Typography, Radii.
   Abschnitt 2 (Farben), 3 (Typography), 4 (Spacing), 5 (Radii), 8 (Animations)
   ───────────────────────────────────────────────────────────────────────────── */

/* ─── Section 13: Base reset + fonts ─────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color var(--duration-slow) var(--ease-default),
              color var(--duration-slow) var(--ease-default);
}

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── Section 2: Color Tokens — Light Mode (Default) ─────────────────────── */

:root {
  /* Backgrounds */
  --bg-primary:     #FFFFFF;
  --bg-surface:     #F3F5F8;
  --bg-elevated:    #FFFFFF;
  --bg-subtle:      #E8ECF2;
  --bg-accent:      #EFF6FF;

  /* Text */
  --text-primary:   #0F172A;
  --text-secondary: #374151;
  --text-muted:     #64748B;
  --text-inverse:   #FFFFFF;
  --text-accent:    #2563EB;
  --text-accent-dark: #1E3A8A;

  /* Borders */
  --border-subtle:  #CBD5E1;
  --border-default: #94A3B8;
  --border-strong:  #94A3B8;
  --border-accent:  #BFDBFE;
  --border-accent-strong: #2563EB;

  /* Accent (Electric Blue) */
  --accent:         #2563EB;
  --accent-hover:   #1D4ED8;
  --accent-active:  #1E40AF;
  --accent-subtle:  #EFF6FF;

  /* Semantic — Success */
  --success:        #16A34A;
  --success-bg:     #F0FDF4;
  --success-border: #BBF7D0;

  /* Semantic — Warning */
  --warning:        #D97706;
  --warning-bg:     #FFFBEB;
  --warning-border: #FDE68A;

  /* Semantic — Danger */
  --danger:         #DC2626;
  --danger-bg:      #FEF2F2;
  --danger-border:  #FECACA;

  /* Brand */
  --link:           #EE2D00;
  --link-hover:     #C92500;

  /* Semantic — Info */
  --info:           #0891B2;
  --info-bg:        #ECFEFF;
  --info-border:    #A5F3FC;

  /* Sidebar (always dark) */
  --sidebar-bg:         #0F172A;
  --sidebar-text:       #CBD5E1;
  --sidebar-text-muted: #64748B;
  --sidebar-active-bg:  #1E293B;
  --sidebar-active-text:#FFFFFF;
  --sidebar-hover-bg:   rgba(255,255,255,0.06);
  --sidebar-accent:     #3B82F6;

  /* Shadows */
  --shadow-sm:    0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-md:    0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -1px rgba(0,0,0,0.04);
  --shadow-lg:    0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.03);
  --shadow-focus: 0 0 0 3px rgba(37,99,235,0.25);

  /* Overlay */
  --overlay: rgba(15,23,42,0.4);

  /* ─── Section 3: Typography ─────────────────────────────────────────────── */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-stat: 36px;

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

  --leading-tight:  1.2;
  --leading-snug:   1.4;
  --leading-normal: 1.6;

  /* ─── Section 4: Spacing ────────────────────────────────────────────────── */
  --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;
  --space-20: 80px;

  /* ─── Section 5: Border Radius ──────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ─── Section 8: Animations ─────────────────────────────────────────────── */
  --duration-fast:   100ms;
  --duration-base:   150ms;
  --duration-slow:   250ms;
  --duration-slower: 400ms;

  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ─── Section 2: Color Tokens — Dark Mode ────────────────────────────────── */

.dark {
  /* Backgrounds */
  --bg-primary:     #0F172A;
  --bg-surface:     #1E293B;
  --bg-elevated:    #293548;
  --bg-subtle:      #0F172A;
  --bg-accent:      #172554;

  /* Text */
  --text-primary:   #F1F5F9;
  --text-secondary: #94A3B8;
  --text-muted:     #475569;
  --text-inverse:   #0F172A;
  --text-accent:    #60A5FA;
  --text-accent-dark: #93C5FD;

  /* Borders */
  --border-subtle:  #1E293B;
  --border-default: #334155;
  --border-strong:  #475569;
  --border-accent:  #1D4ED8;
  --border-accent-strong: #3B82F6;

  /* Accent */
  --accent:         #3B82F6;
  --accent-hover:   #60A5FA;
  --accent-active:  #93C5FD;
  --accent-subtle:  #172554;

  /* Semantic — Success */
  --success:        #22C55E;
  --success-bg:     #052E16;
  --success-border: #166534;

  /* Semantic — Warning */
  --warning:        #F59E0B;
  --warning-bg:     #1C1200;
  --warning-border: #92400E;

  /* Semantic — Danger */
  --danger:         #F87171;
  --danger-bg:      #2D0707;
  --danger-border:  #991B1B;

  /* Brand */
  --link:           #FF5733;
  --link-hover:     #EE2D00;

  /* Semantic — Info */
  --info:           #22D3EE;
  --info-bg:        #0A1628;
  --info-border:    #155E75;

  /* Sidebar */
  --sidebar-bg:         #020617;
  --sidebar-text:       #94A3B8;
  --sidebar-text-muted: #334155;
  --sidebar-active-bg:  #0F172A;
  --sidebar-active-text:#F1F5F9;
  --sidebar-hover-bg:   rgba(255,255,255,0.04);
  --sidebar-accent:     #60A5FA;

  /* Shadows */
  --shadow-sm:    0 1px 2px 0 rgba(0,0,0,0.3);
  --shadow-md:    0 4px 6px -1px rgba(0,0,0,0.4);
  --shadow-lg:    0 10px 15px -3px rgba(0,0,0,0.5);
  --shadow-focus: 0 0 0 3px rgba(59,130,246,0.3);

  /* Overlay */
  --overlay: rgba(0,0,0,0.6);
}