/**
 * Common CSS for AY-I-T Creativity Website
 * 
 * This file contains common CSS styles that are used across all pages.
 * It imports all necessary CSS files in the correct order to ensure
 * consistent styling across the website.
 */

/* Base styles from main.css */
@import url('/css/main.css');

/* Modern UI effects */
@import url('/css/modern-ui.css');

/* Enhanced UI components */
@import url('/css/enhanced-ui.css');

/* Avatar effects for user profiles */
@import url('/css/avatar-effects.css');

/* Tailwind compiled styles */
@import url('/css/tailwind.compiled.css');

/* Variables for consistent theming */
:root {
  /* Color Variables */
  --primary: #3b82f6;
  --primary-dark: #2563eb;
  --primary-light: #60a5fa;
  --secondary: #10b981;
  --secondary-dark: #059669;
  --secondary-light: #34d399;
  --accent: #8b5cf6;
  --accent-dark: #7c3aed;
  --accent-light: #a78bfa;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;
  --dark: #111827;
  --dark-lighter: #1f2937;
  --dark-lightest: #374151;
  --light: #f9fafb;
  --light-darker: #f3f4f6;
  --light-darkest: #e5e7eb;
  --gray: #6b7280;
  --gray-dark: #4b5563;
  --gray-light: #9ca3af;
  
  /* Border colors */
  --dark-border: rgba(255, 255, 255, 0.1);
  
  /* Text colors */
  --text-light: #f9fafb;
  --text-secondary: #d1d5db;
  --text-muted: #9ca3af;
  
  /* Surface colors */
  --dark-surface: #1f2937;
  
  /* RGB values for rgba usage */
  --primary-rgb: 59, 130, 246;
  --secondary-rgb: 16, 185, 129;
  --accent-rgb: 139, 92, 246;
}

/* Dark mode variables */
.dark {
  --primary: #60a5fa;
  --primary-dark: #3b82f6;
  --primary-light: #93c5fd;
  --secondary: #34d399;
  --secondary-dark: #10b981;
  --secondary-light: #6ee7b7;
  --accent: #a78bfa;
  --accent-dark: #8b5cf6;
  --accent-light: #c4b5fd;
}

/* Common utility classes */
.hidden {
  display: none !important;
}

/* Admin-only elements */
.admin-only {
  display: none;
}

body.admin-user .admin-only {
  display: flex;
}

/* Responsive adjustments */
@media (min-width: 768px) {
  .md\:block {
    display: block;
  }
  
  .md\:hidden {
    display: none;
  }
  
  .md\:flex-row {
    flex-direction: row;
  }
  
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  
  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  
  .lg\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}