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

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;
}

/* 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;
}