/* =============================================
   CSS VARIABLES - Medifast Design System
   ============================================= */

:root {
  /* Jade Green Theme - Primary Colors */
  --primary: #00A86B;
  --primary-dark: #007A52;
  --primary-light: #4EC9A8;
  --primary-bg: #F2F2F7;
  --primary-bg-light: #FFFFFF;
  
  /* Accent Colors - Apple Style */
  --accent-yellow: #FFCC00;
  --accent-yellow-light: #FFF4CC;
  --accent-orange: #FF9500;
  --accent-red: #FF3B30;
  --accent-green: #00A86B;
  --accent-blue: #00A86B;
  --accent-purple: #AF52DE;
  --accent-pink: #FF2D55;
  
  /* Neutrals - Apple System Colors */
  --white: #FFFFFF;
  --gray-50: #F9F9F9;
  --gray-100: #F2F2F7;
  --gray-200: #E5E5EA;
  --gray-300: #D1D1D6;
  --gray-400: #C7C7CC;
  --gray-500: #AEAEB2;
  --gray-600: #8E8E93;
  --gray-700: #636366;
  --gray-800: #48484A;
  --gray-900: #1C1C1E;
  
  /* Functional - Apple System Colors */
  --success: #00A86B;
  --warning: #FF9500;
  --danger: #FF3B30;
  --info: #00A86B;
  
  /* Layout */
  --sidebar-width: 260px;
  --header-height: 64px;
  
  /* Typography - Apple SF Pro Style */
  --font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Noto Sans TC', 'Helvetica Neue', Arial, sans-serif;
  
  /* Shadows - Apple Liquid Style (softer, more diffused) */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 24px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.08);
  --shadow-xl: 0 20px 40px rgba(0,0,0,0.15), 0 8px 16px rgba(0,0,0,0.1);
  --shadow-2xl: 0 25px 50px rgba(0,0,0,0.2), 0 10px 20px rgba(0,0,0,0.12);
  
  /* Borders - Apple Style (larger radius) */
  --border-radius: 10px;
  --border-radius-lg: 16px;
  --border-radius-xl: 20px;
  --border-radius-2xl: 28px;
  --border-radius-full: 9999px;
  
  /* Glassmorphism - Enhanced Liquid Glass */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-bg-light: rgba(255, 255, 255, 0.85);
  --glass-bg-dark: rgba(255, 255, 255, 0.5);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-border-light: rgba(255, 255, 255, 0.25);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  --glass-blur: blur(20px) saturate(180%);
  
  /* Liquid Glass - Advanced Layers */
  --glass-layer-1: rgba(255, 255, 255, 0.1);
  --glass-layer-2: rgba(255, 255, 255, 0.15);
  --glass-layer-3: rgba(255, 255, 255, 0.25);
  --glass-inner-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3), inset 0 -1px 2px rgba(0, 0, 0, 0.05);
  
  /* Medical Aesthetic Colors - Calm Palette */
  --medical-mint: rgba(152, 251, 152, 0.15);
  --medical-azure: rgba(135, 206, 250, 0.15);
  --medical-ice-blue: rgba(173, 216, 230, 0.12);
  --medical-pale-jade: rgba(175, 238, 238, 0.1);
  
  /* Typography Glow */
  --text-glow: 0 0 8px rgba(255, 255, 255, 0.3);
  --text-glow-strong: 0 0 12px rgba(255, 255, 255, 0.5);
  
  /* Animation Durations */
  --anim-ripple: 0.6s;
  --anim-glow: 2s;
  --anim-float: 6s;
  --anim-bokeh: 20s;
  
  /* Transitions - Apple Spring Animation Style */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}