/* ============================================
   PHARMALINK B2B - CSS VARIABLES
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Playfair+Display:wght@600;700&display=swap');

:root {
  /* Brand Colors */
  --primary:        #007B5E;
  --primary-dark:   #005A44;
  --primary-light:  #E6F4F0;
  --secondary:      #F97316;
  --secondary-dark: #D9600F;
  --secondary-light:#FFF1E8;
  --accent:         #0EA5E9;
  --accent-dark:    #0284C7;

  /* Neutral Colors */
  --white:    #FFFFFF;
  --bg:       #F5FAF8;
  --bg-card:  #FFFFFF;
  --border:   #E2EEE9;
  --border-strong: #C4D9D0;

  /* Text Colors */
  --text-primary:   #0D1F1A;
  --text-secondary: #3D6057;
  --text-muted:     #7A9E96;
  --text-light:     #A8C4BD;

  /* Status Colors */
  --success: #16A34A;
  --warning: #EAB308;
  --error:   #DC2626;
  --info:    #0EA5E9;

  /* Typography */
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-display: 'Playfair Display', serif;

  /* Spacing */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* Border Radius */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs:  0 1px 3px rgba(0,123,94,0.08);
  --shadow-sm:  0 2px 8px rgba(0,123,94,0.10);
  --shadow-md:  0 4px 20px rgba(0,123,94,0.12);
  --shadow-lg:  0 8px 40px rgba(0,123,94,0.15);
  --shadow-xl:  0 16px 60px rgba(0,123,94,0.18);
  --shadow-card: 0 2px 12px rgba(13,31,26,0.08);

  /* Transitions */
  --transition-fast:   0.15s ease;
  --transition-base:   0.25s ease;
  --transition-slow:   0.4s ease;
  --transition-spring: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout */
  --container-max: 1320px;
  --header-height-desktop: 70px;
  --header-height-mobile:  56px;
  --sidebar-width: 260px;
  --footer-mobile-h: 60px;

  /* Z-index layers */
  --z-base:    1;
  --z-dropdown: 100;
  --z-sidebar: 200;
  --z-overlay: 300;
  --z-header:  400;
  --z-modal:   500;
  --z-toast:   600;
}