/* ==========================================================================
   Design Tokens — TCM Experten Dashboard
   Quelle: tcm-expertenverzeichnis.pen Design System Variables
   ========================================================================== */

:root {
  /* Hauptfarben */
  --color-primary: #177e89;
  --color-primary-dark: #0a6570;
  --color-secondary: #db3a34;
  --color-accent: #ffb600;
  --color-accent-light: #ffe9b4;
  --color-cyan: #00aed9;
  --color-footer-dark: #084c61;
  --color-bg-light: #fcfcfa;
  --color-text-dark: #000a0d;
  --color-border: #abb8c3;
  --color-white: #ffffff;
  --color-success: #2E8B57;
  --color-success-dark: #2E7D32;
  --color-success-bg: #E8F5E9;
  --color-success-bg-light: #dcfce7;
  --color-success-text: #166534;
  --color-warning: #ffb600;
  --color-warning-dark: #D9A400;
  --color-warning-orange: #E65100;
  --color-warning-bg: #FFF3E0;
  --color-warning-bg-light: #fef3c7;
  --color-warning-text: #92400e;
  --color-error: #db3a34;
  --color-error-dark: #991b1b;
  --color-error-bg: #FEF2F2;
  --color-error-bg-light: #fee2e2;
  --color-red-500: #EF4444;
  --color-red-600: #DC2626;
  --color-red-200: #FECACA;
  --color-green-800: #1B5E20;

  /* Zusätzliche UI-Farben */
  --color-border-light: #E8ECF0;
  --color-bg-secondary: #F5F7F9;
  --color-grey-50: #F5F5F5;
  --color-grey-500: #757575;
  --color-muted: #9CA3AF;
  --color-invoice-paid: #22C55E;
  --color-invoice-none: #CCCCCC;
  --color-overlay-subtle: rgba(0, 0, 0, 0.02);
  --color-overlay-light: rgba(0, 0, 0, 0.05);
  --color-overlay: rgba(0, 0, 0, 0.4);
  --color-overlay-dark: rgba(0, 0, 0, 0.5);
  --color-overlay-darker: rgba(0, 0, 0, 0.9);

  /* Focus-Rings & transparente Varianten */
  --color-primary-ring: rgba(23, 126, 137, 0.1);
  --color-primary-ring-md: rgba(23, 126, 137, 0.12);
  --color-secondary-ring: rgba(219, 58, 52, 0.1);
  --color-error-ring: rgba(239, 68, 68, 0.1);
  --color-secondary-bg-subtle: rgba(219, 58, 52, 0.08);
  --color-amber-bg-subtle: rgba(255, 182, 0, 0.08);
  --color-amber-accent-subtle: rgba(245, 158, 11, 0.06);
  --color-amber-accent-border: rgba(245, 158, 11, 0.3);
  --color-teal-ring: rgba(8, 76, 97, 0.1);
  --color-teal-bg-subtle: rgba(8, 75, 95, 0.05);
  --color-teal-border-subtle: rgba(13, 148, 136, 0.2);

  /* Sidebar-Transparenzen */
  --sidebar-text: rgba(255, 255, 255, 0.67);
  --sidebar-text-strong: rgba(255, 255, 255, 0.8);
  --sidebar-hover: rgba(255, 255, 255, 0.08);
  --sidebar-hover-strong: rgba(255, 255, 255, 0.094);
  --sidebar-active: rgba(255, 255, 255, 0.133);
  --sidebar-active-strong: rgba(255, 255, 255, 0.2);

  /* Schatten (erweitert) */
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.15);
  --shadow-modal-strong: 0 20px 60px rgba(0, 0, 0, 0.2);
  --shadow-modal-dark: 0 20px 60px rgba(0, 0, 0, 0.3);
  --shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-card-subtle: 0 8px 32px rgba(0, 0, 0, 0.15);
  --shadow-input: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-card-sm: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-inset: 0 0 0 1px rgba(0, 0, 0, 0.08);

  /* Grautöne (neutral) */
  --color-neutral-50: #F9FAFB;
  --color-neutral-100: #F3F4F6;
  --color-neutral-200: #E5E7EB;
  --color-neutral-300: #D1D5DB;
  --color-neutral-400: #9CA3AF;
  --color-neutral-500: #6B7280;
  --color-neutral-600: #4B5563;
  --color-neutral-700: #374151;
  --color-neutral-800: #1F2937;
  --color-neutral-900: #111827;

  /* Blau (Info) */
  --color-blue-50: #EFF6FF;
  --color-blue-100: #E0F2FE;
  --color-blue-200: #93C5FD;
  --color-blue-500: #3B82F6;
  --color-blue-600: #0284C7;
  --color-blue-700: #0369A1;
  --color-info-bg: #F0F9FF;

  /* Indigo (Kalender) */
  --color-indigo-50: #EEF2FF;
  --color-indigo-200: #C7D2FE;
  --color-indigo-500: #4F46E5;
  --color-indigo-700: #4338CA;
  --color-indigo-bg: #E0E7FF;

  /* Grün (zusätzlich) */
  --color-green-50: #F0FDF4;
  --color-green-100: #DCFCE7;
  --color-green-200: #BBF7D0;
  --color-green-300: #A5D6A7;
  --color-green-400: #4CAF50;
  --color-green-500: #16A34A;
  --color-green-600: #059669;
  --color-green-700: #03543F;
  --color-teal-bg: #F0FDFA;
  --color-teal-dark: #0F766E;
  --color-teal-accent: #0D9488;

  /* Orange/Amber */
  --color-amber-50: #FFFBEB;
  --color-amber-100: #FFF8E1;
  --color-amber-200: #FDE68A;
  --color-amber-300: #FED7AA;
  --color-amber-500: #F59E0B;
  --color-amber-600: #D97706;
  --color-amber-700: #EA580C;
  --color-orange-500: #FF9800;
  --color-orange-600: #E67E22;

  /* Rot (zusätzlich) */
  --color-red-300: #FCA5A5;
  --color-red-400: #C62828;
  --color-red-700: #C00;
  --color-red-bg: #FFEBEE;
  --color-red-bg-light: #FDEAEA;
  --color-secondary-dark: #c0312c;

  /* Weitere Grautöne */
  --color-text-secondary: #666666;
  --color-text-muted: #999999;
  --color-text-light: #BBBBBB;
  --color-grey-400: #BDBDBD;
  --color-slate-500: #475569;
  --color-slate-600: #CBD5E1;
  --color-bg-hover: #F5F7FA;
  --color-bg-muted: #F0F2F4;
  --color-bg-subtle: #F0F0F0;
  --color-primary-accent: #136a73;
  --color-cyan-dark: #009bc1;
  --color-green-bg: #C8E6C9;
  --color-green-bg-light: #DEF7EC;
  --color-green-accent: #10B981;
  --color-green-bg-soft: #ECFDF5;

  /* Grautöne (warm) */
  --color-warm-grey-50: #fafaf8;
  --color-warm-grey-100: #f5f5f0;
  --color-warm-grey-200: #ececdf;
  --color-warm-grey-300: #d5d5c8;
  --color-warm-grey-400: #a8a898;
  --color-warm-grey-500: #78786c;

  /* Grautöne (kühl) */
  --color-cool-grey-50: #f8fafb;
  --color-cool-grey-100: #f0f4f7;
  --color-cool-grey-200: #e0e5ea;
  --color-cool-grey-300: #c8d0d8;
  --color-cool-grey-400: #abb8c3;
  --color-cool-grey-500: #6b7a88;

  /* Teal Shadings */
  --color-teal-50: #e8f4f5;
  --color-teal-100: #c5e4e7;
  --color-teal-200: #84c5cc;
  --color-teal-300: #4aabb5;
  --color-teal-400: #177e89;
  --color-teal-500: #0a6570;
  --color-teal-600: #084c61;

  /* Health-Profile Farbskala (0=gesund → 10=kritisch) */
  --color-hp-0: #15803D;
  --color-hp-1: #438D38;
  --color-hp-2: #719933;
  --color-hp-3: #9FA62E;
  --color-hp-4: #CDB229;
  --color-hp-5: #FBBF24;
  --color-hp-6: #E79E22;
  --color-hp-7: #D37E20;
  --color-hp-8: #C05D1D;
  --color-hp-9: #AC3C1C;
  --color-hp-10: #981B1B;

  /* Typografie */
  --font-heading: 'Ibarra Real Nova', serif;
  --font-body: 'Montserrat', sans-serif;
  --font-size-xs: 13px;
  --font-size-sm: 16px;
  --font-size-base: 18px;
  --font-size-md: 20px;
  --font-size-lg: 24px;
  --font-size-xl: 28px;
  --font-size-2xl: 32px;
  --font-size-3xl: 36px;
  --font-size-4xl: 42px;

  /* Abstände */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* Schatten */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-tooltip: 0 4px 12px rgba(0, 0, 0, 0.2);
  --shadow-tab: 0 -4px 8px rgba(0, 0, 0, 0.094);

  /* Sidebar */
  --sidebar-width: 260px;
  --sidebar-bg: var(--color-footer-dark);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
}