/* Neutral OpenGist. Light stays paper. Dark is matte charcoal, not jet. */
:root {
  --og-fg: #171717;
  --og-bg: #ffffff;
  --og-muted: #737373;
  --og-border: #e5e5e5;
  --og-btn: #2c2c2c;
  --og-btn-fg: #f4f4f4;
  --og-panel: #fafafa;
  --og-header: #f6f6f6;
  --og-header-border: #e8e8e8;
}
html.dark {
  --og-fg: #ececec;
  --og-bg: #1c1c1c;
  --og-muted: #9a9a9a;
  --og-border: #333333;
  --og-btn: #2e2e2e;
  --og-btn-fg: #f0f0f0;
  --og-panel: #242424;
  --og-header: #161616;
  --og-header-border: #2e2e2e;
}

html, body, #app {
  background-color: var(--og-bg) !important;
  color: var(--og-fg) !important;
}
.bg-white { background-color: var(--og-bg) !important; }
.dark\:bg-gray-900:is(.dark *) { background-color: var(--og-bg) !important; }
.dark\:bg-gray-800:is(.dark *) { background-color: var(--og-panel) !important; }
.dark\:bg-gray-700:is(.dark *) { background-color: #2a2a2a !important; }
.bg-gray-50, .bg-gray-100 { background-color: var(--og-panel) !important; }

nav.bg-gray-50,
nav.dark\:bg-gray-800 {
  background-color: var(--og-header) !important;
  border-bottom: 1px solid var(--og-header-border) !important;
}
html.dark nav {
  background-color: var(--og-header) !important;
  border-bottom: 1px solid var(--og-header-border) !important;
}

.text-gray-700, .text-gray-800, .text-gray-900 { color: var(--og-fg) !important; }
.dark\:text-white:is(.dark *) { color: var(--og-fg) !important; }
.text-gray-500, .text-gray-400 { color: var(--og-muted) !important; }

.bg-primary-200,
.bg-primary-300,
.bg-primary-400,
.bg-primary-500,
.bg-primary-600,
.hover\:bg-primary-300:hover,
.hover\:bg-primary-500:hover,
.hover\:bg-primary-600:hover {
  background-color: var(--og-btn) !important;
  color: var(--og-btn-fg) !important;
}
html.dark .bg-primary-500,
html.dark .bg-primary-600,
html.dark .hover\:bg-primary-500:hover,
html.dark .hover\:bg-primary-600:hover {
  background-color: #2e2e2e !important;
  color: #f0f0f0 !important;
}
.dark\:bg-primary-950:is(.dark *) { background-color: var(--og-panel) !important; }
.dark\:hover\:bg-primary-900:hover:is(.dark *),
html.dark .hover\:bg-gray-700:hover,
html.dark .dark\:hover\:bg-gray-700:hover {
  background-color: #2a2a2a !important;
}

.text-primary-500,
.text-primary-600,
.text-primary-900,
.hover\:text-primary-600:hover,
.dark\:text-primary-200:is(.dark *),
.dark\:text-primary-400:is(.dark *) {
  color: var(--og-fg) !important;
}

.border-primary-200,
.border-primary-500,
.hover\:border-primary-400:hover,
.hover\:border-primary-600:hover,
.focus\:border-primary-500:focus,
.focus-within\:border-primary-500:focus-within,
.dark\:border-primary-400:is(.dark *),
.dark\:border-primary-700:is(.dark *),
.dark\:hover\:border-primary-500:hover:is(.dark *),
.dark\:border-gray-700:is(.dark *) {
  border-color: var(--og-border) !important;
}

.focus\:ring-primary-500:focus,
.focus\:ring-primary-600:focus,
.focus-within\:ring-primary-500:focus-within {
  --tw-ring-color: #2c2c2c !important;
}
html.dark .focus\:ring-primary-500:focus,
html.dark .focus\:ring-primary-600:focus,
html.dark .focus-within\:ring-primary-500:focus-within {
  --tw-ring-color: #5a5a5a !important;
}

a { color: inherit; }
button, .btn { border-radius: 0.25rem; }