aeon.css

/* AeonOS Design System for Gradio Spaces */

.gradio-container {
  background: #09090b !important;
  color: #fafafa !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Surface panels */
.block, .panel, .form, .wrap, .contain {
  background: #0c0c0f !important;
  border-color: #1f1f23 !important;
  border-radius: 6px !important;
}

/* Elevated panels */
.gr-panel, .gr-box, .gr-form {
  background: #111114 !important;
  border: 1px solid #1f1f23 !important;
}

/* Text */
.prose, .markdown, label, .label-wrap {
  color: #fafafa !important;
}

.prose h1, .prose h2, .prose h3, .markdown h1, .markdown h2, .markdown h3 {
  color: #fafafa !important;
}

.prose p, .markdown p {
  color: #a1a1aa !important;
}

/* Secondary text */
.secondary-text, .caption, .info {
  color: #71717a !important;
}

/* Links */
a, .prose a, .markdown a {
  color: #3b82f6 !important;
  text-decoration: none !important;
}
a:hover {
  color: #60a5fa !important;
}

/* Inputs */
input, textarea, select, .gr-input, .gr-text-input {
  background: #09090b !important;
  border: 1px solid #1f1f23 !important;
  color: #fafafa !important;
  border-radius: 6px !important;
  font-size: 16px !important;
}
input:focus, textarea:focus {
  border-color: #3b82f6 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15) !important;
}

/* Primary button */
.primary, button.primary, .gr-button-primary {
  background: #3b82f6 !important;
  color: #fafafa !important;
  border: none !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
  transition: background 150ms ease !important;
}
.primary:hover, button.primary:hover {
  background: #60a5fa !important;
}

/* Secondary buttons */
button, .gr-button {
  background: #18181b !important;
  color: #a1a1aa !important;
  border: 1px solid #1f1f23 !important;
  border-radius: 6px !important;
}
button:hover, .gr-button:hover {
  background: #1e1e22 !important;
  border-color: #27272a !important;
}

/* Tables */
table {
  border-collapse: collapse !important;
}
th {
  background: #111114 !important;
  color: #a1a1aa !important;
  border-bottom: 1px solid #1f1f23 !important;
  padding: 8px 12px !important;
  text-align: left !important;
}
td {
  border-bottom: 1px solid #17171a !important;
  padding: 8px 12px !important;
  color: #fafafa !important;
}

/* Code blocks */
code, pre {
  background: #111114 !important;
  color: #93c5fd !important;
  border-radius: 4px !important;
  border: 1px solid #1f1f23 !important;
}

/* Accent glow for key metrics */
.metric-highlight {
  color: #3b82f6 !important;
  font-weight: 600 !important;
}

/* Status colors */
.success { color: #22c55e !important; }
.warning { color: #eab308 !important; }
.error { color: #ef4444 !important; }

/* Dataset/Examples component */
.dataset-row, .sample-row {
  background: #111114 !important;
  border: 1px solid #1f1f23 !important;
}
.dataset-row:hover, .sample-row:hover {
  background: #18181b !important;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #09090b;
}
::-webkit-scrollbar-thumb {
  background: #27272a;
  border-radius: 3px;
}

/* Footer */
footer {
  color: #52525b !important;
}