/**
 * UTTOP Official Colors - Design System
 *
 * Last Updated: December 16, 2025
 * Source: UTTOP Charte Graphique
 *
 * IMPORTANT: Primary color (#004F78) should be used sparingly.
 * Prefer complementary colors for main palette.
 */

:root {
  /* ===== PRIMARY COLOR (use sparingly) ===== */
  --uttop-blue: #004F78;
  --uttop-blue-rgb: 0, 79, 120;

  /* ===== COMPLEMENTARY COLORS (main palette) ===== */
  --uttop-green: #10997D;
  --uttop-green-rgb: 16, 153, 125;

  --uttop-light-green: #45DB97;
  --uttop-light-green-rgb: 69, 219, 151;

  --uttop-yellow: #F5D837;
  --uttop-yellow-rgb: 245, 216, 55;

  --uttop-pink: #FF99D6;
  --uttop-pink-rgb: 255, 153, 214;

  --uttop-purple: #586DDD;
  --uttop-purple-rgb: 88, 109, 221;

  /* ===== ZONE-SPECIFIC COLORS (interactive map) ===== */
  --zone-default: #FF99D6;          /* PINK - Global campus view */
  --zone-default-alt: #F5D837;      /* YELLOW - Alternative global view */

  --zone-enit: #FF0000;             /* RED - ENIT buildings selected */
  --zone-enit-rgb: 255, 0, 0;

  --zone-iut: #0000FF;              /* BLUE - IUT buildings selected */
  --zone-iut-rgb: 0, 0, 255;

  --zone-crous: #FF9800;            /* ORANGE - CROUS selected */
  --zone-crous-rgb: 255, 152, 0;

  --zone-omp: #9C27B0;              /* PURPLE - OMP selected */
  --zone-omp-rgb: 156, 39, 176;

  /* Additional zone colors for UI components */
  --zone-pink: var(--uttop-pink);           /* Alias for consistency */
  --zone-pink-rgb: var(--uttop-pink-rgb);

  --zone-yellow: var(--uttop-yellow);       /* Alias for consistency */
  --zone-yellow-rgb: var(--uttop-yellow-rgb);

  --zone-orange: var(--zone-crous);         /* Alias for consistency */
  --zone-orange-rgb: var(--zone-crous-rgb);

  --zone-purple: var(--zone-omp);           /* Alias for consistency */
  --zone-purple-rgb: var(--zone-omp-rgb);

  --zone-green: #4CAF50;                    /* GREEN - Services/General */
  --zone-green-rgb: 76, 175, 80;

  /* ===== SEMANTIC COLORS ===== */
  --color-success: var(--uttop-light-green);
  --color-warning: var(--uttop-yellow);
  --color-info: var(--uttop-blue);
  --color-highlight: var(--uttop-pink);

  /* ===== GRAYSCALE ===== */
  --gray-50: #FAFAFA;
  --gray-100: #F5F5F5;
  --gray-200: #EEEEEE;
  --gray-300: #E0E0E0;
  --gray-400: #BDBDBD;
  --gray-500: #9E9E9E;
  --gray-600: #757575;
  --gray-700: #616161;
  --gray-800: #424242;
  --gray-900: #212121;

  /* ===== TEXT COLORS ===== */
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-700);
  --text-disabled: var(--gray-500);
  --text-inverse: #FFFFFF;

  /* ===== BACKGROUND COLORS ===== */
  --bg-primary: #FFFFFF;
  --bg-secondary: var(--gray-100);
  --bg-tertiary: var(--gray-200);
  --bg-overlay: rgba(0, 0, 0, 0.5);

  /* ===== BORDER COLORS ===== */
  --border-light: var(--gray-300);
  --border-medium: var(--gray-400);
  --border-dark: var(--gray-600);

  /* ===== SPACING SCALE ===== */
  --spacing-xs: 0.25rem;    /* 4px */
  --spacing-sm: 0.5rem;     /* 8px */
  --spacing-md: 1rem;       /* 16px */
  --spacing-lg: 1.5rem;     /* 24px */
  --spacing-xl: 2rem;       /* 32px */
  --spacing-2xl: 3rem;      /* 48px */
  --spacing-3xl: 4rem;      /* 64px */

  /* ===== BORDER RADIUS ===== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ===== SHADOWS ===== */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

  /* ===== TRANSITIONS ===== */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* ===== Z-INDEX SCALE ===== */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;

  /* ===== COMPATIBILITY ALIASES (for module consistency) ===== */
  /* Primary colors */
  --color-primary: var(--uttop-blue);
  --color-secondary: var(--uttop-green);
  --color-accent: var(--uttop-pink);

  /* Institution colors */
  --color-enit: var(--zone-enit);
  --color-iut: var(--zone-iut);
  --color-crous: var(--zone-crous);

  /* Zone colors (with "color-" prefix for consistency) */
  --color-zone-pink: var(--zone-pink);
  --color-zone-yellow: var(--zone-yellow);
  --color-zone-orange: var(--zone-orange);
  --color-zone-purple: var(--zone-purple);
  --color-zone-green: var(--zone-green);

  /* Basic colors */
  --color-white: #FFFFFF;
  --color-black: #000000;

  /* Text colors (aliases) */
  --color-text-dark: var(--text-primary);
  --color-text: var(--text-secondary);
  --color-text-light: var(--text-disabled);

  /* Background colors (aliases) */
  --color-bg: var(--bg-secondary);
  --color-bg-primary: var(--bg-primary);
  --color-bg-card: var(--bg-primary);

  /* Border colors (aliases) */
  --color-border: var(--border-light);
  --color-border-medium: var(--border-medium);
  --color-border-dark: var(--border-dark);

  /* Border radius (aliases) */
  --border-radius: var(--radius-md);
  --border-radius-small: var(--radius-sm);
  --border-radius-large: var(--radius-lg);
  --border-radius-xl: var(--radius-xl);

  /* Shadows (aliases) */
  --shadow-small: var(--shadow-sm);
  --shadow-medium: var(--shadow-md);
  --shadow-large: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);

  /* ===== GRADIENT PRESETS (reusable across modules) ===== */
  --gradient-primary: linear-gradient(135deg, var(--uttop-blue) 0%, var(--uttop-green) 100%);
  --gradient-enit-iut: linear-gradient(135deg, var(--zone-enit) 0%, var(--zone-iut) 100%);
  --gradient-rainbow: linear-gradient(90deg,
    var(--zone-pink) 0%,
    var(--zone-yellow) 25%,
    var(--zone-orange) 50%,
    var(--zone-purple) 75%,
    var(--uttop-blue) 100%
  );
  --gradient-page-bg: linear-gradient(180deg,
    rgba(255, 153, 214, 0.08) 0%,
    rgba(245, 216, 55, 0.08) 33%,
    rgba(156, 39, 176, 0.08) 66%,
    rgba(0, 79, 120, 0.08) 100%
  );
}

/* ===== UTILITY CLASSES ===== */

/* Background Colors */
.bg-uttop-blue { background-color: var(--uttop-blue); }
.bg-uttop-green { background-color: var(--uttop-green); }
.bg-uttop-light-green { background-color: var(--uttop-light-green); }
.bg-uttop-yellow { background-color: var(--uttop-yellow); }
.bg-uttop-pink { background-color: var(--uttop-pink); }
.bg-uttop-purple { background-color: var(--uttop-purple); }

.bg-zone-default { background-color: var(--zone-default); }
.bg-zone-enit { background-color: var(--zone-enit); }
.bg-zone-iut { background-color: var(--zone-iut); }
.bg-zone-crous { background-color: var(--zone-crous); }
.bg-zone-omp { background-color: var(--zone-omp); }
.bg-zone-pink { background-color: var(--zone-pink); }
.bg-zone-yellow { background-color: var(--zone-yellow); }
.bg-zone-orange { background-color: var(--zone-orange); }
.bg-zone-purple { background-color: var(--zone-purple); }
.bg-zone-green { background-color: var(--zone-green); }

/* Text Colors */
.text-uttop-blue { color: var(--uttop-blue); }
.text-uttop-green { color: var(--uttop-green); }
.text-uttop-light-green { color: var(--uttop-light-green); }
.text-uttop-yellow { color: var(--uttop-yellow); }
.text-uttop-pink { color: var(--uttop-pink); }
.text-uttop-purple { color: var(--uttop-purple); }

.text-zone-enit { color: var(--zone-enit); }
.text-zone-iut { color: var(--zone-iut); }
.text-zone-pink { color: var(--zone-pink); }
.text-zone-yellow { color: var(--zone-yellow); }
.text-zone-orange { color: var(--zone-orange); }
.text-zone-purple { color: var(--zone-purple); }
.text-zone-green { color: var(--zone-green); }

/* Border Colors */
.border-uttop-blue { border-color: var(--uttop-blue); }
.border-uttop-green { border-color: var(--uttop-green); }
.border-uttop-yellow { border-color: var(--uttop-yellow); }

.border-zone-enit { border-color: var(--zone-enit); }
.border-zone-iut { border-color: var(--zone-iut); }
.border-zone-pink { border-color: var(--zone-pink); }
.border-zone-yellow { border-color: var(--zone-yellow); }
.border-zone-orange { border-color: var(--zone-orange); }
.border-zone-purple { border-color: var(--zone-purple); }
.border-zone-green { border-color: var(--zone-green); }

/* Zone Badges */
.badge {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge-iut {
  background-color: rgba(var(--zone-iut-rgb), 0.1);
  color: var(--zone-iut);
  border: 1px solid var(--zone-iut);
}

.badge-enit {
  background-color: rgba(var(--zone-enit-rgb), 0.1);
  color: var(--zone-enit);
  border: 1px solid var(--zone-enit);
}

.badge-crous {
  background-color: rgba(var(--zone-crous-rgb), 0.1);
  color: var(--zone-crous);
  border: 1px solid var(--zone-crous);
}

.badge-omp {
  background-color: rgba(var(--zone-omp-rgb), 0.1);
  color: var(--zone-omp);
  border: 1px solid var(--zone-omp);
}

.badge-other {
  background-color: rgba(var(--zone-purple-rgb), 0.1);
  color: var(--zone-purple);
  border: 1px solid var(--zone-purple);
}

.badge-services {
  background-color: rgba(var(--zone-green-rgb), 0.1);
  color: var(--zone-green);
  border: 1px solid var(--zone-green);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-md);
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition-base);
  cursor: pointer;
  border: none;
  gap: var(--spacing-xs);
}

.btn-primary {
  background-color: var(--uttop-blue);
  color: var(--text-inverse);
}

.btn-primary:hover {
  background-color: color-mix(in srgb, var(--uttop-blue) 85%, black);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background-color: var(--uttop-light-green);
  color: var(--text-inverse);
}

.btn-secondary:hover {
  background-color: var(--uttop-green);
}

.btn-outline {
  background-color: transparent;
  color: var(--uttop-blue);
  border: 2px solid var(--uttop-blue);
}

.btn-outline:hover {
  background-color: var(--uttop-blue);
  color: var(--text-inverse);
}

.btn-small {
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: 0.875rem;
}

.btn-large {
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: 1.125rem;
}

/* Zone Selector Buttons */
.zone-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  border: 2px solid var(--border-medium);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-base);
}

.zone-btn:hover {
  border-color: var(--uttop-blue);
  background-color: var(--gray-50);
}

.zone-btn.active {
  background-color: var(--uttop-blue);
  color: var(--text-inverse);
  border-color: var(--uttop-blue);
}

.zone-btn[data-zone="iut"].active {
  background-color: var(--zone-iut);
  border-color: var(--zone-iut);
}

.zone-btn[data-zone="enit"].active {
  background-color: var(--zone-enit);
  border-color: var(--zone-enit);
}

.zone-btn[data-zone="crous"].active {
  background-color: var(--zone-crous);
  border-color: var(--zone-crous);
}

.zone-btn[data-zone="omp"].active {
  background-color: var(--zone-omp);
  border-color: var(--zone-omp);
}

/* Cards */
.card {
  background-color: var(--bg-primary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* Module Cards (Home Dashboard) */
.module-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--bg-primary) 0%, var(--gray-50) 100%);
  border: 2px solid var(--border-light);
  text-decoration: none;
  color: var(--text-primary);
  transition: all var(--transition-base);
  aspect-ratio: 1;
}

.module-card:hover {
  border-color: var(--uttop-blue);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.module-card.full-width {
  aspect-ratio: auto;
}

.module-icon {
  font-size: 3rem;
}

.module-title {
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  margin: 0;
}

.module-description {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-align: center;
  margin: 0;
}

/* Priority Indicators */
.module-card[data-priority="high"] {
  border-color: var(--uttop-light-green);
  background: linear-gradient(135deg,
    rgba(var(--uttop-light-green-rgb), 0.05) 0%,
    var(--bg-primary) 100%
  );
}

.module-card[data-priority="high"]:hover {
  border-color: var(--uttop-green);
}

/* ===== GRADIENT UTILITIES ===== */

.gradient-primary {
  background: var(--gradient-primary);
}

.gradient-enit-iut {
  background: var(--gradient-enit-iut);
}

.gradient-rainbow {
  background: var(--gradient-rainbow);
}

.gradient-page-bg {
  background: var(--gradient-page-bg);
  background-attachment: fixed;
}

/* Gradient borders (using border-image) */
.gradient-border {
  border: 3px solid;
  border-image: var(--gradient-rainbow) 1;
}

.gradient-border-bottom {
  border-bottom: 3px solid;
  border-image: var(--gradient-rainbow) 1;
  border-image-slice: 1;
}

/* ===== COLORFUL COMPONENT UTILITIES ===== */

/* Loader/Spinner with rainbow animation */
.loader-spinner {
  border: 3px solid var(--border-light);
  border-top-color: var(--uttop-blue);
  border-radius: var(--radius-full);
  width: 40px;
  height: 40px;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Colorful section backgrounds */
.section-bg-pink {
  background: linear-gradient(135deg, rgba(255, 153, 214, 0.03) 0%, transparent 100%);
}

.section-bg-yellow {
  background: linear-gradient(135deg, rgba(245, 216, 55, 0.03) 0%, transparent 100%);
}

.section-bg-purple {
  background: linear-gradient(135deg, rgba(156, 39, 176, 0.03) 0%, transparent 100%);
}

.section-bg-blue {
  background: linear-gradient(135deg, rgba(0, 79, 120, 0.03) 0%, transparent 100%);
}

/* Colorful card accents */
.card-accent-pink {
  border-left: 5px solid var(--zone-pink);
  background: linear-gradient(90deg, rgba(255, 153, 214, 0.03) 0%, var(--bg-primary) 100%);
}

.card-accent-yellow {
  border-left: 5px solid var(--zone-yellow);
  background: linear-gradient(90deg, rgba(245, 216, 55, 0.03) 0%, var(--bg-primary) 100%);
}

.card-accent-orange {
  border-left: 5px solid var(--zone-orange);
  background: linear-gradient(90deg, rgba(255, 152, 0, 0.03) 0%, var(--bg-primary) 100%);
}

.card-accent-purple {
  border-left: 5px solid var(--zone-purple);
  background: linear-gradient(90deg, rgba(156, 39, 176, 0.03) 0%, var(--bg-primary) 100%);
}

.card-accent-green {
  border-left: 5px solid var(--zone-green);
  background: linear-gradient(90deg, rgba(76, 175, 80, 0.03) 0%, var(--bg-primary) 100%);
}

.card-accent-enit {
  border-left: 5px solid var(--zone-enit);
  background: linear-gradient(90deg, rgba(255, 0, 0, 0.03) 0%, var(--bg-primary) 100%);
}

.card-accent-iut {
  border-left: 5px solid var(--zone-iut);
  background: linear-gradient(90deg, rgba(0, 0, 255, 0.03) 0%, var(--bg-primary) 100%);
}

/* Button full width helper */
.btn-full-width {
  width: 100%;
}

/* Icon helper */
.btn-icon {
  font-size: 1.25rem;
}

.btn-text {
  flex: 1;
}

/* ===== DARK MODE SUPPORT (optional) ===== */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: var(--gray-900);
    --bg-secondary: var(--gray-800);
    --bg-tertiary: var(--gray-700);
    --text-primary: var(--gray-100);
    --text-secondary: var(--gray-300);
    --border-light: var(--gray-700);
    --border-medium: var(--gray-600);
  }

  .card {
    background-color: var(--gray-800);
  }

  .module-card {
    background: linear-gradient(135deg, var(--gray-800) 0%, var(--gray-700) 100%);
  }
}