/**
 * RZF Medis - Design System Variables
 * Custom Vanilla CSS Tokens
 */

:root {
  /* Brand Colors */
  --color-primary: #1871AB;
  --color-primary-hover: #135b8a;
  --color-primary-light: #e8f3fa;
  --color-primary-dark: #0f466b;
  --color-primary-50: #f0f7fc;
  --color-primary-100: #e0eff8;
  --color-primary-500: #1871AB;
  --color-primary-600: #135b8a;

  /* Secondary / Accent Colors (Green Active Pill) */
  --color-accent-green: #65a30d;
  --color-accent-green-dark: #4d7c0f;
  --color-accent-green-light: #f7fee7;
  --color-accent-green-border: #d9f99d;
  --color-accent-green-pill: #ecfccb;

  /* Status Colors */
  --color-success: #10B981;
  --color-success-bg: #ECFDF5;
  --color-warning: #F59E0B;
  --color-warning-bg: #FFFBEB;
  --color-danger: #EF4444;
  --color-danger-bg: #FEF2F2;
  --color-info: #06B6D4;
  --color-info-bg: #ECFEFF;

  /* Neutral & Grayscale */
  --color-white: #FFFFFF;
  --color-bg-app: #F8FAFC;
  --color-bg-card: #FFFFFF;
  --color-bg-input: #F8FAFC;
  --color-bg-hover: #F1F5F9;
  
  --color-border: #E2E8F0;
  --color-border-light: #F1F5F9;
  --color-border-focus: #1871AB;

  --color-text-title: #0F172A;
  --color-text-main: #1E293B;
  --color-text-body: #475569;
  --color-text-muted: #64748B;
  --color-text-placeholder: #94A3B8;

  /* Typography */
  --font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-xs: 0.75rem;     /* 12px */
  --font-size-sm: 0.84375rem;  /* 13.5px */
  --font-size-base: 0.9375rem; /* 15px */
  --font-size-md: 1rem;        /* 16px */
  --font-size-lg: 1.125rem;    /* 18px */
  --font-size-xl: 1.25rem;     /* 20px */
  --font-size-2xl: 1.5rem;     /* 24px */
  --font-size-3xl: 1.875rem;   /* 30px */

  /* Shadows */
  --shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 2px 4px -1px rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.04);
  --shadow-dropdown: 0 10px 30px rgba(15, 23, 42, 0.12);

  /* Border Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* Layout dimensions */
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 76px;
  --header-height: 70px;
  
  /* Transitions */
  --transition-fast: 0.15s ease-in-out;
  --transition-normal: 0.25s ease-in-out;
  --transition-slow: 0.35s ease-in-out;
}