:root {
  --school321-bg: #f5f5f5;
  --school321-grid-line: rgba(0, 0, 0, 0.08);
  --school321-accent: #111827;
  --school321-accent-hover: #0f172a;

  /* Announcement palette (light) */
  --school321-info-bg: #eff6ff;
  --school321-info-border: #bfdbfe;
  --school321-info-accent: #3b82f6;
  --school321-info-text: #1e40af;

  --school321-warning-bg: #fffbeb;
  --school321-warning-border: #fde68a;
  --school321-warning-accent: #f59e0b;
  --school321-warning-text: #92400e;

  --school321-alert-bg: #fef2f2;
  --school321-alert-border: #fecaca;
  --school321-alert-accent: #ef4444;
  --school321-alert-text: #991b1b;
}

body {
  background: var(--school321-bg);
}

.school321-grid {
  background-image:
    linear-gradient(to right, var(--school321-grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--school321-grid-line) 1px, transparent 1px);
  background-size: 140px 140px;
}

.school321-primary {
  background: var(--school321-accent);
  color: #fff;
}

.school321-primary:hover {
  background: var(--school321-accent-hover);
}

.school321-primary:focus-visible {
  outline: 2px solid var(--school321-accent);
  outline-offset: 2px;
}

/* Announcement component (shared) */
.school321-announcement {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.5;
  border: 1px solid var(--school321-ann-border);
  background: var(--school321-ann-bg);
  color: var(--school321-ann-text);
}

.school321-announcement.is-inline {
  border-radius: 0;
  border-top: none;
}

.school321-announcement button {
  color: inherit;
}

.school321-ann-icon {
  color: var(--school321-ann-accent);
}

.school321-announcement--info {
  --school321-ann-bg: var(--school321-info-bg);
  --school321-ann-border: var(--school321-info-border);
  --school321-ann-accent: var(--school321-info-accent);
  --school321-ann-text: var(--school321-info-text);
}

.school321-announcement--warning {
  --school321-ann-bg: var(--school321-warning-bg);
  --school321-ann-border: var(--school321-warning-border);
  --school321-ann-accent: var(--school321-warning-accent);
  --school321-ann-text: var(--school321-warning-text);
}

.school321-announcement--alert {
  --school321-ann-bg: var(--school321-alert-bg);
  --school321-ann-border: var(--school321-alert-border);
  --school321-ann-accent: var(--school321-alert-accent);
  --school321-ann-text: var(--school321-alert-text);
}

.school321-ann-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.6;
  border: 1px solid var(--school321-badge-border);
  background: var(--school321-badge-bg);
  color: var(--school321-badge-text);
}

.school321-ann-badge--info {
  --school321-badge-bg: var(--school321-info-bg);
  --school321-badge-border: var(--school321-info-border);
  --school321-badge-text: var(--school321-info-text);
}

.school321-ann-badge--warning {
  --school321-badge-bg: var(--school321-warning-bg);
  --school321-badge-border: var(--school321-warning-border);
  --school321-badge-text: var(--school321-warning-text);
}

.school321-ann-badge--alert {
  --school321-badge-bg: var(--school321-alert-bg);
  --school321-badge-border: var(--school321-alert-border);
  --school321-badge-text: var(--school321-alert-text);
}

/* Dark mode overrides */
[data-school321-theme="dark"] .bg-white\/70 {
  background-color: rgba(30, 30, 30, 0.8) !important;
}

[data-school321-theme="dark"] .bg-white {
  background-color: #1e1e1e !important;
}

[data-school321-theme="dark"] .bg-neutral-100 {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

[data-school321-theme="dark"] .hover\:bg-neutral-50:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

[data-school321-theme="dark"] .text-black {
  color: #e5e5e5 !important;
}

[data-school321-theme="dark"] .text-neutral-500 {
  color: #a3a3a3 !important;
}

[data-school321-theme="dark"] .border-black\/10 {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-school321-theme="dark"] .hover\:border-black\/20:hover {
  border-color: rgba(255, 255, 255, 0.18) !important;
}

[data-school321-theme="dark"] .focus-visible\:border-black\/20:focus-visible {
  border-color: rgba(255, 255, 255, 0.18) !important;
}

[data-school321-theme="dark"] .border-b.border-black\/10 {
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

[data-school321-theme="dark"] .border-t.border-black\/10 {
  border-top-color: rgba(255, 255, 255, 0.1) !important;
}

[data-school321-theme="dark"] select {
  background-color: #1e1e1e !important;
  color: #e5e5e5 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-school321-theme="dark"] .school321-primary {
  color: #e5e5e5;
}

[data-school321-theme="dark"] {
  /* Announcement palette (dark) */
  --school321-info-bg: rgba(59, 130, 246, 0.14);
  --school321-info-border: rgba(147, 197, 253, 0.28);
  --school321-info-accent: #60a5fa;
  --school321-info-text: #bfdbfe;

  --school321-warning-bg: rgba(245, 158, 11, 0.12);
  --school321-warning-border: rgba(251, 191, 36, 0.26);
  --school321-warning-accent: #fbbf24;
  --school321-warning-text: #fde68a;

  --school321-alert-bg: rgba(239, 68, 68, 0.12);
  --school321-alert-border: rgba(252, 165, 165, 0.26);
  --school321-alert-accent: #f87171;
  --school321-alert-text: #fecaca;
}