/* ========================================
   CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   Adolescent Health & Social Development
   ======================================== */

:root {
  /* ===== BRAND COLORS (Primary: #27aae1 - Sky Blue) ===== */
  --primary-color: #27aae1;       /* Sky Blue - Main brand color */
  --primary-dark: #1e8ab8;        /* Darker sky blue */
  --primary-white: #ffffff;        /* Pure white */
  --primary-light: #52c0ea;       /* Lighter sky blue */
  --primary-lighter: #7dd0f0;     /* Even lighter sky blue */
  
  --secondary-color: #1e8ab8;     /* Deep sky blue */
  --secondary-dark: #156a8f;      /* Dark sky blue */
  --secondary-light: #3ba1d0;     /* Light sky blue */
  
  /* Bootstrap compatibility */
  --bs-teal: #27aae1;             /* Same as primary */
  --bs-teal-dark: #1e8ab8;        /* Same as primary-dark */
  --color-teal: #27aae1;          /* Alias for compatibility */
  --color-teal-dark: #1e8ab8;     /* Alias for compatibility */
  
  --accent-color: #F0C808;        /* Warm yellow/gold accent */
  --accent-dark: #D4AE07;         /* Darker gold */
  --accent-light: #F5D535;        /* Light gold */
  
  /* Alternative accent */
  --accent-secondary: #FF6B6B;    /* Coral red for CTAs */
  
  /* ===== NEUTRAL COLORS ===== */
  --dark-color: #1a1a1a;
  --dark-gray: #2d2d2d;
  --medium-gray: #495057;
  --light-gray: #6c757d;
  --lighter-gray: #adb5bd;
  
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #6c757d;
  --gray-700: #495057;
  --gray-800: #343a40;
  --gray-900: #212529;
  
  --white: #ffffff;
  --off-white: #fafafa;
  
  /* ===== SEMANTIC COLORS ===== */
  --success-color: #28a745;
  --info-color: #17a2b8;
  --warning-color: #ffc107;
  --danger-color: #dc3545;
  
  /* ===== TYPOGRAPHY ===== */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-heading: 'Poppins', var(--font-primary);
  --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
  
  /* Font Sizes */
  --fs-xs: 0.75rem;      /* 12px */
  --fs-sm: 0.875rem;     /* 14px */
  --fs-base: 1rem;       /* 16px */
  --fs-md: 1.125rem;     /* 18px */
  --fs-lg: 1.25rem;      /* 20px */
  --fs-xl: 1.5rem;       /* 24px */
  --fs-2xl: 2rem;        /* 32px */
  --fs-3xl: 2.5rem;      /* 40px */
  --fs-4xl: 3rem;        /* 48px */
  --fs-5xl: 3.5rem;      /* 56px */
  
  /* Font Weights */
  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  
  /* Line Heights */
  --lh-tight: 1.2;
  --lh-snug: 1.375;
  --lh-normal: 1.5;
  --lh-relaxed: 1.625;
  --lh-loose: 2;
  
  /* ===== SPACING SCALE ===== */
  --space-0: 0;
  --space-1: 0.25rem;    /* 4px */
  --space-2: 0.5rem;     /* 8px */
  --space-3: 0.75rem;    /* 12px */
  --space-4: 1rem;       /* 16px */
  --space-5: 1.25rem;    /* 20px */
  --space-6: 1.5rem;     /* 24px */
  --space-8: 2rem;       /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */
  
  /* ===== BORDER RADIUS ===== */
  --radius-none: 0;
  --radius-sm: 0.25rem;  /* 4px */
  --radius-md: 0.5rem;   /* 8px */
  --radius-lg: 0.75rem;  /* 12px */
  --radius-xl: 1rem;     /* 16px */
  --radius-2xl: 1.5rem;  /* 24px */
  --radius-full: 9999px;
  
  /* ===== SHADOWS ===== */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px 0 rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 16px 0 rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 12px 24px 0 rgba(0, 0, 0, 0.18);
  --shadow-2xl: 0 16px 32px 0 rgba(0, 0, 0, 0.2);
  
  /* ===== TRANSITIONS ===== */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;
  --transition-slower: 500ms ease-in-out;
  
  /* Easing Functions */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  
  /* ===== Z-INDEX SCALE ===== */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  
  /* ===== LAYOUT ===== */
  --container-max-width: 1320px;
  --container-padding: var(--space-4);
  
  --navbar-height: 80px;
  --navbar-height-mobile: 60px;
  
  --footer-min-height: 400px;
  
  --hero-height: 600px;
  --hero-height-tablet: 500px;
  --hero-height-mobile: 400px;
  
  /* ===== BREAKPOINTS (Reference - use Bootstrap classes) ===== */
  /* xs: < 576px */
  /* sm: >= 576px */
  /* md: >= 768px */
  /* lg: >= 992px */
  /* xl: >= 1200px */
  /* xxl: >= 1400px */
}

/* ===== REDUCED MOTION SUPPORT ===== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
    --transition-slower: 0ms;
  }
  
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}