@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bebas+Neue&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Design system: brand and semantic color tokens */
  --brand-blue: #5271FF;
  --brand-blue-dark: #3a56e0;
  --brand-blue-light: #7b93ff;
  --brand-black: #000000;
  --brand-white: #FFFFFF;

  --color-primary: var(--brand-blue);
  --color-primary-hover: var(--brand-blue-dark);
  /* Hell-/dunkelabhängige Farb-Tokens (--color-text, --color-surface, --gray-*, --tint-*,
     --topbar-bg, --content-bg …) stehen in theme.css (Entscheid 103). */

  /* Typography */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: 'Anton', 'Inter', sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --line-height-body: 1.5;
  --line-height-heading: 1.25;

  /* Spacing, shape, and interaction */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --radius-sm: 4px;
  --radius-control: 6px;
  --radius-card: 8px;
  --radius-pill: 999px;
  --control-height: 38px;
  --button-height: 32px;
  --icon-button-size: 32px;
  --focus-ring: 0 0 0 3px rgba(82, 113, 255, 0.2);
  --transition-fast: 150ms ease;

  --sidebar-bg: rgba(11, 19, 38, 0.92);
  --sidebar-border: rgba(66, 71, 84, 0.25);
  --sidebar-text: #c2c6d6;
  --sidebar-hover: rgba(45, 52, 73, 0.5);
  --sidebar-active: var(--brand-blue);

  --sidebar-width: 240px;
  --sidebar-collapsed-width: 64px;
  --sidebar-transition: 0.22s cubic-bezier(0.4,0,0.2,1);
}