/*
  Design tokens for DAS MEDHUB.
  Premium healthcare CRM design system with glassmorphism accents.
*/
:root {
  /* --- Brand Colors --- */
  --verdant: #00be64;
  --verdant-dark: #00a856;
  --verdant-light: #2ecc71;
  --verdant-tint: rgba(0, 190, 100, 0.1);
  --verdant-glass: rgba(0, 190, 100, 0.08);
  
  --ember: #fd9150;
  --ember-dark: #e87a38;
  --ember-light: #ffab70;
  --ember-tint: rgba(253, 145, 80, 0.1);
  --ember-glass: rgba(253, 145, 80, 0.08);
  
  /* --- Neutrals --- */
  --ink: #14181a;
  --ink-soft: #4b5563;
  --ink-faint: #8a9290;
  --ink-light: #6b7280;
  
  --paper: #f8faf9;
  --paper-warm: #fafbf9;
  --surface: #ffffff;
  --surface-glass: rgba(255, 255, 255, 0.85);
  --line: #e3e6e2;
  --line-strong: #cdd2ce;
  --line-faint: #f0f2f1;
  
  /* --- Semantic Colors --- */
  --success: var(--verdant);
  --attention: var(--ember);
  --danger: #dc2626;
  --danger-light: #ef4444;
  --danger-tint: rgba(220, 38, 38, 0.1);
  --info: #3b82f6;
  --info-tint: rgba(59, 130, 246, 0.1);
  
  /* --- Glassmorphism --- */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.5);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  --glass-backdrop: blur(12px);
  
  /* --- Gradients --- */
  --gradient-verdant: linear-gradient(135deg, var(--verdant) 0%, var(--verdant-dark) 100%);
  --gradient-ember: linear-gradient(135deg, var(--ember) 0%, var(--ember-dark) 100%);
  --gradient-subtle: linear-gradient(180deg, var(--paper) 0%, var(--surface) 100%);
  --gradient-card: linear-gradient(145deg, rgba(255,255,255,0.9) 0%, rgba(248,250,249,0.9) 100%);
  
  /* --- Typography --- */
  --font-ui: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', 'Consolas', monospace;
  
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.375rem;
  --text-xl: 1.875rem;
  --text-2xl: 2.75rem;
  --text-3xl: 3.5rem;
  
  /* --- Spacing --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;
  --space-10: 96px;
  --space-14: 56px;
  
  /* --- Shape --- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --sidebar-width: 260px;
  --topbar-height: 64px;
  
  /* --- Shadows --- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.1);
  --shadow-raised: 0 8px 24px rgba(20, 24, 26, 0.1), 0 2px 6px rgba(20, 24, 26, 0.06);
  --shadow-glow-verdant: 0 4px 20px rgba(0, 190, 100, 0.25);
  --shadow-glow-ember: 0 4px 20px rgba(253, 145, 80, 0.25);
  
  /* --- Transitions --- */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}