Customizing Look & Feel

/* Example color values */
--primary: #5850ec;
--background: #ffffff;
--card-bg: #f9fafb;
--text-primary: #111827;
--text-secondary: #6b7280;

/* Customize fonts */
.portal-content {
  font-family: 'Inter', sans-serif;
}

/* Round corners more */
.announcement-card {
  border-radius: 16px;
}

/* Custom header style */
.portal-header {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.8);
}

/* Category badge colors */
.category-new {
  background-color: #10b981;
  color: white;
}

/* Google Fonts example */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

.portal-content {
  font-family: 'Inter', -apple-system, sans-serif;
}

/* Wider content area */
.portal-container {
  max-width: 1200px;
}

/* Narrow, focused reading */
.announcement-content {
  max-width: 680px;
  margin: 0 auto;
}

/* Card hover effects */
.announcement-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Custom card borders */
.announcement-card {
  border: 1px solid #e5e7eb;
  border-left: 4px solid var(--primary);
}

/* Pill-style badges */
.category-badge {
  border-radius: 9999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
}

/* Custom subscribe button */
.subscribe-button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  font-weight: 600;
}

/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
  .portal-content {
    --background: #0f172a;
    --text-primary: #f1f5f9;
    --card-bg: #1e293b;
  }
}

[data-theme="dark"] {
  --background: #0f172a;
  --text-primary: #f1f5f9;
}

/* Mobile-first adjustments */
@media (max-width: 640px) {
  .portal-header {
    padding: 16px;
  }
  
  .announcement-card {
    padding: 20px;
  }
  
  /* Stack elements on mobile */
  .announcement-meta {
    flex-direction: column;
    gap: 8px;
  }
}

/* Clean, technical look */
--primary: #0969da;
--background: #ffffff;
--font-family: 'SF Mono', monospace;
border-radius: 0;

/* Friendly, colorful */
--primary: #8b5cf6;
--background: #faf5ff;
border-radius: 24px;
font-family: 'Poppins', sans-serif;

/* Professional, trustworthy */
--primary: #0f172a;
--background: #f8fafc;
font-family: -apple-system, sans-serif;