/* =========================================================
   DESIGN TOKENS — BSD Planer
   Feuerwehr-Einsatzplanung · alle Variablen zentral
   ========================================================= */

:root {
  /* -- Brand ----------------------------------------------- */
  --color-brand-50:  #FEF2F3;
  --color-brand-100: #FDE3E5;
  --color-brand-200: #FAC6CB;
  --color-brand-300: #F39199;
  --color-brand-400: #E45662;
  --color-brand-500: #C1121F;   /* Primary */
  --color-brand-600: #A30E19;
  --color-brand-700: #7E0B14;
  --color-brand-800: #5C0810;
  --color-brand-900: #3D060B;

  /* -- Neutrals (Anthrazit) -------------------------------- */
  --color-ink-0:   #FFFFFF;
  --color-ink-25:  #FAFBFC;
  --color-ink-50:  #F3F4F6;     /* App-Background */
  --color-ink-100: #E5E7EB;     /* Border */
  --color-ink-200: #D1D5DB;
  --color-ink-300: #9CA3AF;
  --color-ink-400: #6B7280;
  --color-ink-500: #4B5563;
  --color-ink-600: #374151;
  --color-ink-700: #1F2937;     /* Dark / Sidebar */
  --color-ink-800: #111827;
  --color-ink-900: #0B1220;

  /* -- Status ---------------------------------------------- */
  --color-success-50:  #ECFDF3;
  --color-success-100: #D1FADF;
  --color-success-500: #16A34A;
  --color-success-600: #15803D;
  --color-success-700: #166534;

  --color-warning-50:  #FFFBEB;
  --color-warning-100: #FEF3C7;
  --color-warning-500: #D97706;
  --color-warning-600: #B45309;
  --color-warning-700: #92400E;

  --color-danger-50:   #FEF2F2;
  --color-danger-100:  #FEE2E2;
  --color-danger-500:  #DC2626;
  --color-danger-600:  #B91C1C;
  --color-danger-700:  #991B1B;

  --color-info-50:  #EFF6FF;
  --color-info-100: #DBEAFE;
  --color-info-500: #2563EB;
  --color-info-600: #1D4ED8;

  /* -- Semantic shortcuts ---------------------------------- */
  --bg-app:        var(--color-ink-50);
  --bg-card:       var(--color-ink-0);
  --bg-sidebar:    var(--color-ink-700);
  --bg-sidebar-2:  var(--color-ink-800);
  --bg-muted:      var(--color-ink-25);
  --bg-hover:      #F1F2F4;

  --border:        var(--color-ink-100);
  --border-strong: var(--color-ink-200);

  --text-strong:   var(--color-ink-800);
  --text:          var(--color-ink-700);
  --text-muted:    var(--color-ink-400);
  --text-soft:     var(--color-ink-500);
  --text-on-dark:  #E5E7EB;
  --text-on-dark-muted: #9CA3AF;

  /* -- Spacing scale (4px base) ---------------------------- */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  48px;
  --sp-10: 64px;
  --sp-11: 80px;

  /* -- Radius ---------------------------------------------- */
  --r-xs: 3px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;
  --r-2xl: 16px;
  --r-pill: 999px;

  /* -- Shadow ---------------------------------------------- */
  --shadow-xs: 0 1px 1px rgba(17, 24, 39, 0.04);
  --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06), 0 1px 1px rgba(17, 24, 39, 0.04);
  --shadow-md: 0 4px 8px -2px rgba(17, 24, 39, 0.08), 0 2px 4px -2px rgba(17, 24, 39, 0.05);
  --shadow-lg: 0 12px 24px -6px rgba(17, 24, 39, 0.12), 0 4px 8px -4px rgba(17, 24, 39, 0.06);
  --shadow-xl: 0 20px 40px -12px rgba(17, 24, 39, 0.20), 0 8px 16px -8px rgba(17, 24, 39, 0.10);
  --shadow-focus: 0 0 0 3px rgba(193, 18, 31, 0.22);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.04);

  /* -- Typography ------------------------------------------ */
  --font-sans: "Inter", "Inter var", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace,
               Menlo, Consolas, monospace;
  --font-numeric: "Inter", "Inter var", sans-serif;

  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;

  --lh-tight: 1.2;
  --lh-snug:  1.35;
  --lh-base:  1.5;

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

  /* -- Layout dims ----------------------------------------- */
  --sidebar-w:      256px;
  --sidebar-w-min:  64px;
  --topbar-h:       56px;
  --mobile-nav-h:   60px;
  --content-max:    1440px;

  /* -- Motion ---------------------------------------------- */
  --t-fast: 120ms;
  --t-base: 180ms;
  --t-slow: 260ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* -- Z index --------------------------------------------- */
  --z-sticky:   50;
  --z-dropdown: 100;
  --z-modal:    400;
  --z-toast:    500;
}