/**
 * 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 - Teal-Orange Fusion */
:root {
  /* Primary Teal Colors */
  --primary: #00bfa5;
  --primary-dark: #008c8c;
  --primary-light: #00d4bb;

  /* Secondary Orange Colors */
  --secondary: #ff7043;
  --secondary-dark: #e64a19;
  --secondary-light: #ff8a65;

  /* Accent - using teal as accent */
  --accent: #00a9a5;
  --accent-dark: #008c8c;
  --accent-light: #00bfa5;

  /* Status Colors */
  --success: #00bfa5;
  --warning: #ff7043;
  --danger: #ef4444;
  --info: #00a9a5;

  /* Dark Theme Backgrounds */
  --dark: #0a0a1a;
  --dark-lighter: #1a1a2e;
  --dark-lightest: #0c1f26;

  /* Light Theme */
  --light: #f9fafb;
  --light-darker: #f3f4f6;
  --light-darkest: #e5e7eb;

  /* Grays */
  --gray: #6b7280;
  --gray-dark: #4b5563;
  --gray-light: #9ca3af;

  /* Teal-Orange Specific */
  --accent-teal: #00bfa5;
  --accent-orange: #ff7043;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #008c8c 0%, #00a9a5 30%, #ff7043 100%);
  --gradient-dark: linear-gradient(135deg, #0a0a1a 0%, #1a1a2e 50%, #0c1f26 100%);
  --gradient-glow: linear-gradient(135deg, rgba(0, 140, 140, 0.3), rgba(0, 169, 165, 0.2), rgba(255, 112, 67, 0.1));

  /* 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: #1a1a2e;

  /* RGB values for rgba usage */
  --primary-rgb: 0, 191, 165;
  --secondary-rgb: 255, 112, 67;
  --accent-rgb: 0, 169, 165;
}

/* Dark mode variables - Teal-Orange Fusion */
.dark {
  --primary: #00d4bb;
  --primary-dark: #00bfa5;
  --primary-light: #1de9b6;
  --secondary: #ff8a65;
  --secondary-dark: #ff7043;
  --secondary-light: #ffab91;
  --accent: #00bfa5;
  --accent-dark: #00a9a5;
  --accent-light: #00d4bb;
}

/* Dark Mode Toggle Icon & Logo Visibility */
/* Now handled by Tailwind dark: classes in HTML */
/* Using block/hidden dark:block/dark:hidden classes */

/* 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;
  }
}