/* ============================================================
   Insektenschutz Aurich — Design-Tokens
   Light-only · WCAG AA · Akzent: Vertrauensblau (#2563A8)
   1:1 in den Code übernehmbar.
   ============================================================ */
:root{
  /* — Neutrals (warmes Slate) — */
  --color-bg:           #F6F7F7;
  --color-surface:      #FFFFFF;
  --color-surface-2:    #FBFCFC;
  --color-line:         #E6E9E8;
  --color-line-strong:  #D3D8D7;
  --color-neutral-50:   #F6F7F7;
  --color-neutral-100:  #EEF0F0;
  --color-neutral-200:  #E2E5E4;
  --color-neutral-300:  #CDD2D1;
  --color-neutral-400:  #9AA3A1;
  --color-neutral-500:  #6B7472;
  --color-neutral-700:  #3A4240;
  --color-neutral-900:  #161E1C;
  --color-text:         #161E1C;
  --color-text-2:       #6B7472;
  --color-text-3:       #9AA3A1;

  /* — Akzent: Vertrauensblau — */
  --color-accent:       #2563A8;
  --color-accent-ink:   #1C4E86;
  --color-accent-deep:  #163C68;
  --color-accent-200:   #A9CBED;
  --color-accent-tint:  #E7F0FA;
  --color-accent-tint-2:#F1F6FC;
  --color-on-accent:    #FFFFFF;

  /* — Status — */
  --color-status-draft:       #5C6573;  --color-status-draft-bg: #EEF0F0;
  --color-status-final:       #2563A8;  --color-status-final-bg: #E7F0FA;
  --color-status-sent:        #6D4AC9;  --color-status-sent-bg:  #EEE9FA;
  --color-status-paid:        #147A5B;  --color-status-paid-bg:  #E5F2EC;
  --color-status-overdue:     #C2362C;  --color-status-overdue-bg:#FBE9E7;
  --color-status-cancelled:   #8A9290;  --color-status-cancelled-bg:#EEF0F0;

  /* — Semantisch — */
  --color-ok:     #147A5B;  --color-ok-bg:     #E5F2EC;
  --color-warn:   #B5761A;  --color-warn-bg:   #FBF0DD;
  --color-danger: #C2362C;  --color-danger-bg: #FBE9E7;

  /* — Typografie — */
  --font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-size-xs:      13px;
  --font-size-sm:      15px;
  --font-size-base:    17px;
  --font-size-lg:      19px;
  --font-size-xl:      22px;
  --font-size-2xl:     26px;
  --font-size-3xl:     32px;
  --font-size-display: 40px;
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-extrabold:800;
  --line-height-tight: 1.15;
  --line-height-base:  1.5;

  /* — Spacing (4px-Raster) — */
  --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:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  26px;
  --radius-pill: 999px;

  /* — Schatten — */
  --shadow-sm: 0 1px 2px rgba(16,24,40,.05);
  --shadow:    0 2px 4px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06);
  --shadow-lg: 0 10px 20px rgba(16,24,40,.07), 0 28px 56px rgba(16,24,40,.10);

  /* — Sonstiges — */
  --tap-target: 48px;
  --focus-ring: rgba(37,99,168,.32);
}