/* utilities/system.css */
/* System Messages and Bot Command Output Styling */

/* ============================================================================
   Command Help Output
   ============================================================================ */

/* Main header color - bright green */
.system-cmd-header {
  color: var(--color-primary) !important;
  font-weight: bold;
}

/* Section header color - yellow/orange warning color */
.system-cmd-section {
  color: var(--color-warning) !important;
  font-weight: bold;
}

/* Command text/syntax color - cyan (distinct from regular text) */
.system-cmd-text {
  color: #00ffff !important;
}

/* ============================================================================
   System Notifications
   ============================================================================ */

/* General info messages */
.system-info {
  color: var(--color-info);
}

/* Success messages */
.system-success {
  color: var(--color-success);
}

/* Warning messages */
.system-warning {
  color: var(--color-warning);
}

/* Error messages */
.system-error {
  color: var(--color-danger);
}

/* ============================================================================
   Moderation Action Messages
   ============================================================================ */

.system-mod-action {
  color: var(--color-warning);
  font-weight: bold;
}

.system-mod-target {
  color: var(--color-primary);
}

.system-mod-reason {
  color: var(--color-text-secondary);
  font-style: italic;
}

/* ============================================================================
   Connection/Room Messages
   ============================================================================ */

.system-connect {
  color: var(--color-success);
  font-style: italic;
}

.system-disconnect {
  color: var(--color-text-muted);
  font-style: italic;
}

.system-announcement {
  color: var(--color-primary);
  font-weight: bold;
  text-align: center;
  display: block;
  margin: var(--space-md) 0;
  padding: var(--space-sm);
  background: rgba(0, 255, 0, 0.05);
  border: 1px solid var(--color-border);
}

/* ============================================================================
   Site-Wide Announcement Banners
   ============================================================================ */

.site-announcement {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  text-align: center;
  font-weight: 500;
  border-bottom: 1px solid;
}

.site-announcement__content {
  max-width: var(--container-max);
  margin: 0 auto;
}

/* Banner variant (appears under navigation) */
.site-announcement--banner {
  font-size: var(--font-size-sm);
}

/* Homepage variant (detailed announcements) */
.site-announcement--homepage {
  text-align: left;
  margin: var(--space-lg) 0;
  padding: var(--space-md) var(--space-lg);
  border: 1px solid;
  background: var(--color-bg-surface);
}

.site-announcement--homepage .site-announcement__content {
  max-width: 100%;
}

.site-announcement--homepage .site-announcement__title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  font-size: var(--font-size-lg);
  font-weight: bold;
}

.site-announcement--homepage .site-announcement__body {
  line-height: var(--line-height-relaxed);
}

.site-announcement--homepage .site-announcement__body ul,
.site-announcement--homepage .site-announcement__body ol {
  margin: var(--space-sm) 0;
  padding-left: var(--space-lg);
}

.site-announcement--homepage .site-announcement__body li {
  margin: var(--space-xs) 0;
}

/* Severity: Informational (default - green/primary) */
.site-announcement--info {
  color: var(--color-primary);
  background: rgba(0, 255, 0, 0.05);
  border-color: var(--color-primary);
}

/* Severity: Warning (orange) */
.site-announcement--warning {
  color: var(--color-warning);
  background: rgba(255, 170, 0, 0.1);
  border-color: var(--color-warning);
}

/* Severity: Critical (red) */
.site-announcement--critical {
  color: var(--color-danger);
  background: rgba(255, 0, 0, 0.1);
  border-color: var(--color-danger);
}