/* SMILE Flask Template Styles - Stanford University Theme */

/* Stanford University Official Color Scheme */
:root {
  /* Stanford University Official Colors */
  --stanford-cardinal: #8C1515;
  --stanford-tan: #D2C295;
  --stanford-white: #FFFFFF;
  --stanford-pine: #2E2D29;

  /* Derived colors for UI elements */
  --stanford-cardinal-light: #B91E1E;
  --stanford-cardinal-dark: #6B1010;
  --stanford-tan-light: #E8D9B3;
  --stanford-tan-dark: #C0B082;
  --stanford-pine-light: #3D3B35;

  /* Semantic color mapping */
  --primary-color: var(--stanford-cardinal);
  --primary-hover: var(--stanford-cardinal-light);
  --primary-dark: var(--stanford-cardinal-dark);
  --secondary-color: var(--stanford-tan);
  --secondary-hover: var(--stanford-tan-light);
  --secondary-dark: var(--stanford-tan-dark);
  --text-primary: var(--stanford-pine);
  --text-secondary: var(--stanford-pine-light);
  --background-primary: var(--stanford-white);
  --accent-color: var(--stanford-tan);
}

/* Mobile Menu Button Pulse Animation */
@keyframes pulse-menu {
  0%, 100% {
    box-shadow: 0 2px 8px rgba(140, 21, 21, 0.3);
  }
  50% {
    box-shadow: 0 2px 20px rgba(140, 21, 21, 0.6), 0 0 0 4px rgba(140, 21, 21, 0.2);
  }
}

#mobile-menu-btn {
  animation: pulse-menu 2s ease-in-out 3;
}

#mobile-menu-btn:hover {
  animation: none;
}

/* Custom utilities and components */
.alert {
    @apply px-4 py-3 rounded-md mb-4;
}

.alert-info {
    @apply bg-blue-100 border border-blue-400 text-blue-700;
}

.alert-success {
    @apply bg-green-100 border border-green-400 text-green-700;
}

.alert-warning {
    @apply bg-yellow-100 border border-yellow-400 text-yellow-700;
}

.alert-error {
    @apply bg-red-100 border border-red-400 text-red-700;
}

/* Landing page hero section */
.hero-gradient {
    background: linear-gradient(135deg, var(--stanford-cardinal) 0%, var(--stanford-cardinal-dark) 100%);
}

/* Button styles */
.btn-primary {
    background-color: var(--stanford-cardinal);
    color: var(--stanford-white);
    @apply px-6 py-3 rounded-lg transition-colors duration-200;
}

.btn-primary:hover {
    background-color: var(--stanford-cardinal-light);
}

.btn-secondary {
    background-color: var(--stanford-tan);
    color: var(--stanford-pine);
    @apply px-6 py-3 rounded-lg transition-colors duration-200;
}

.btn-secondary:hover {
    background-color: var(--stanford-tan-light);
}

/* Card component */
.card {
    @apply bg-white rounded-lg shadow-md p-6;
}

/* Stats display */
.stat-card {
    background-color: var(--stanford-white);
    @apply p-6 rounded-lg shadow text-center;
}

.stat-card h3 {
    color: var(--stanford-cardinal);
    @apply text-2xl font-bold mb-2;
}

.stat-card p {
    color: var(--stanford-pine-light);
}

/* Loading spinner */
.spinner {
    @apply inline-block w-6 h-6 border-2 rounded-full;
    border-color: var(--stanford-cardinal);
    border-right-color: transparent;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* React island containers */
.react-island {
    @apply min-h-[200px] bg-gray-50 rounded-lg p-4;
}

.react-island.loading::before {
    content: "Loading interactive component...";
    @apply text-gray-500 text-center block;
}