/* ======================================
   TMHSS - Design System Variables
   Smart School - Light, Modern Theme
   ====================================== */

:root {
  /* Primary Palette */
  --primary: #2196F3;
  --primary-light: #64B5F6;
  --primary-lighter: #BBDEFB;
  --primary-dark: #1565C0;
  --primary-50: #E3F2FD;

  /* Secondary - Soft Green */
  --secondary: #43A047;
  --secondary-light: #81C784;
  --secondary-lighter: #C8E6C9;
  --secondary-dark: #2E7D32;
  --secondary-50: #E8F5E9;

  /* Accent - Sky Blue */
  --accent: #00BCD4;
  --accent-light: #80DEEA;
  --accent-dark: #00838F;

  /* Warm Golden */
  --gold: #FFB300;
  --gold-light: #FFE082;
  --gold-50: #FFF8E1;

  /* Neutral */
  --white: #FFFFFF;
  --off-white: #F8FBFF;
  --gray-50: #F0F4F8;
  --gray-100: #E1E8F0;
  --gray-200: #C5D2E0;
  --gray-300: #A0B3C8;
  --gray-400: #6B8099;
  --gray-500: #4A6278;
  --gray-600: #3A4F63;
  --gray-700: #2A3A4A;
  --text-dark: #1A2C3D;
  --text-body: #3D5166;
  --text-muted: #6B8099;

  /* Gradients */
  --gradient-hero: linear-gradient(135deg, rgba(33,150,243,0.85) 0%, rgba(0,188,212,0.7) 50%, rgba(67,160,71,0.6) 100%);
  --gradient-primary: linear-gradient(135deg, #2196F3 0%, #00BCD4 100%);
  --gradient-secondary: linear-gradient(135deg, #43A047 0%, #00BCD4 100%);
  --gradient-warm: linear-gradient(135deg, #E3F2FD 0%, #F8FBFF 50%, #E8F5E9 100%);
  --gradient-card: linear-gradient(145deg, rgba(255,255,255,0.95) 0%, rgba(227,242,253,0.8) 100%);
  --gradient-section: linear-gradient(180deg, #F8FBFF 0%, #E3F2FD 100%);
  --gradient-footer: linear-gradient(135deg, #1A2C3D 0%, #1565C0 100%);

  /* Shadows */
  --shadow-xs: 0 1px 3px rgba(33,150,243,0.08);
  --shadow-sm: 0 4px 12px rgba(33,150,243,0.1);
  --shadow-md: 0 8px 25px rgba(33,150,243,0.15);
  --shadow-lg: 0 16px 40px rgba(33,150,243,0.18);
  --shadow-xl: 0 24px 60px rgba(33,150,243,0.22);
  --shadow-card: 0 4px 20px rgba(26,44,61,0.08), 0 1px 4px rgba(26,44,61,0.05);
  --shadow-card-hover: 0 12px 40px rgba(33,150,243,0.2), 0 4px 12px rgba(26,44,61,0.08);

  /* Glass */
  --glass-bg: rgba(255,255,255,0.85);
  --glass-border: rgba(255,255,255,0.6);
  --glass-shadow: 0 8px 32px rgba(33,150,243,0.15), inset 0 1px 0 rgba(255,255,255,0.8);

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 40px;
  --radius-full: 9999px;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;

  /* Typography */
  --font-primary: 'Poppins', 'Inter', sans-serif;
  --font-display: 'Poppins', sans-serif;

  /* Font Sizes */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-7xl: 4.5rem;

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

  /* Z-index */
  --z-base: 1;
  --z-float: 10;
  --z-sticky: 100;
  --z-overlay: 500;
  --z-modal: 1000;
  --z-toast: 2000;
}