/**
 * PixelAdvisor Design Tokens
 * Zentrale CSS-Variablen für konsistentes High-End-Design.
 */
:root {
  /* Neutral */
  --bg: #F6F7F9;
  --surface: #FFFFFF;
  --surface-2: #F2F4F7;
  --border: #E6E8EC;
  --text: #0F172A;
  --text-2: #334155;
  --muted: #64748B;

  /* Brand */
  --brand: #F59E0B;
  --brand-2: #FB923C;
  --brand-soft: #FFF7ED;

  /* Score (Ampel) */
  --good: #10B981;
  --mid: #F59E0B;
  --bad: #EF4444;

  /* Focus */
  --focus: rgba(245, 158, 11, 0.35);

  /* Shadow */
  --shadow-sm: 0 2px 10px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 10px 30px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.10);

  /* Radius */
  --r-xs: 10px;
  --r-sm: 14px;
  --r-md: 18px;
  --r-lg: 24px;

  /* Spacing */
  --s-1: 6px;
  --s-2: 10px;
  --s-3: 14px;
  --s-4: 18px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 40px;
  --s-8: 56px;
  --s-9: 72px;

  /* Typography */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --h1: 42px;
  --h2: 28px;
  --h3: 20px;
  --body: 16px;
  --small: 13px;
  --lh: 1.6;

  /* Layout */
  --container: 1240px;
  --content: 820px;
  --sidebar: 360px;
}