/* Frap Design System — Forgejo Theme
 * Version: 1.0
 * Aligned with: DESIGN-SYSTEM.md
 */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ─── Core Palette ─────────────────────────────────── */
  --color-body: #111827;
  --color-box-body: #1F2937;
  --color-box-body-highlight: #242D3A;
  --color-secondary-dark-2: #374151;
  --color-border: #374151;
  --color-shadow: rgba(0, 0, 0, 0.3);
  --color-input-background: #1F2937;
  --color-input-border: #374151;
  --color-hover: rgba(56, 189, 248, 0.05);

  /* ─── Primary — Telemetry Blue ─────────────────────── */
  --color-primary: #38BDF8;
  --color-primary-dark-1: #2AA3D8;
  --color-primary-dark-2: #1E8BBE;
  --color-primary-light-1: #5CCBFA;
  --color-primary-light-2: #7ED6FB;
  --color-primary-alpha-10: rgba(56, 189, 248, 0.1);
  --color-primary-alpha-20: rgba(56, 189, 248, 0.2);
  --color-primary-contrast: #111827;

  /* ─── Text ─────────────────────────────────────────── */
  --color-text: #E5E7EB;
  --color-text-dark: #E5E7EB;
  --color-text-light: #9CA3AF;
  --color-text-light-2: #6B7280;
  --color-text-light-3: #4B5563;

  /* ─── Semantic ─────────────────────────────────────── */
  --color-success: #22C55E;
  --color-success-dark-1: #16A34A;
  --color-success-light-1: #4ADE80;
  --color-warning: #F59E0B;
  --color-warning-dark-1: #D97706;
  --color-warning-light-1: #FBBF24;
  --color-error: #EF4444;
  --color-error-dark-1: #DC2626;
  --color-error-light-1: #F87171;
  --color-info: #38BDF8;
  --color-info-dark-1: #2AA3D8;
  --color-info-light-1: #5CCBFA;

  /* ─── Purple (secondary accent) ────────────────────── */
  --color-purple: #9F7AEA;

  /* ─── Typography ───────────────────────────────────── */
  --fonts-proportional: 'IBM Plex Sans', system-ui, sans-serif !important;
  --fonts-monospace: 'JetBrains Mono', 'Fira Mono', monospace !important;
}

/* ─── Global ──────────────────────────────────────────── */

body {
  background: var(--color-body);
  color: var(--color-text);
}

a { color: var(--color-primary); }
a:hover { color: var(--color-primary-light-1); }

/* ─── Navbar ──────────────────────────────────────────── */

.ui.secondary.menu.navbar,
nav.navbar {
  background: var(--color-body) !important;
  border-bottom: 1px solid var(--color-border) !important;
}

/* ─── Segments / Cards ────────────────────────────────── */

.ui.segment,
.ui.segments .segment,
.ui.attached.segment {
  background: var(--color-box-body);
  border-color: var(--color-border);
}

/* ─── Repository ──────────────────────────────────────── */

.repo-header {
  background: var(--color-box-body) !important;
  border-bottom: 1px solid var(--color-border) !important;
}

/* ─── Buttons ─────────────────────────────────────────── */

.ui.primary.button,
.ui.primary.buttons .button {
  background: var(--color-primary) !important;
  color: var(--color-primary-contrast) !important;
  border: none;
}

.ui.primary.button:hover,
.ui.primary.buttons .button:hover {
  background: var(--color-primary-light-1) !important;
}

.ui.button {
  border: 1px solid var(--color-border);
}

/* ─── Labels ──────────────────────────────────────────── */

.ui.label {
  font-family: var(--fonts-monospace);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

/* ─── Code / Monaco ───────────────────────────────────── */

.code-view,
.CodeMirror,
.monaco-editor,
.file-view pre,
code,
pre {
  font-family: var(--fonts-monospace) !important;
}

.code-view {
  background: var(--color-body) !important;
}

/* ─── Tables ──────────────────────────────────────────── */

.ui.table {
  background: var(--color-box-body);
  border-color: var(--color-border);
}

.ui.table thead th {
  background: var(--color-body);
  border-color: var(--color-border);
  font-family: var(--fonts-proportional);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ui.table td {
  border-color: var(--color-border);
}

/* ─── Forms / Input ───────────────────────────────────── */

.ui.input input,
.ui.form input,
.ui.form textarea,
.ui.form select {
  background: var(--color-input-background) !important;
  border-color: var(--color-input-border) !important;
  color: var(--color-text) !important;
}

.ui.input input:focus,
.ui.form input:focus,
.ui.form textarea:focus {
  border-color: var(--color-primary) !important;
}

/* ─── Dropdown ────────────────────────────────────────── */

.ui.dropdown .menu {
  background: var(--color-box-body);
  border-color: var(--color-border);
}

.ui.dropdown .menu > .item {
  color: var(--color-text) !important;
  border-color: var(--color-border);
}

.ui.dropdown .menu > .item:hover {
  background: var(--color-hover) !important;
}

/* ─── Tabs ────────────────────────────────────────────── */

.ui.tabular.menu .item {
  border-color: var(--color-border) !important;
  color: var(--color-text-light);
}

.ui.tabular.menu .active.item {
  background: var(--color-box-body) !important;
  border-bottom-color: var(--color-box-body) !important;
  color: var(--color-text) !important;
}

/* ─── Diff View ───────────────────────────────────────── */

.diff-file-box .diff-file-header {
  background: var(--color-body) !important;
  border-color: var(--color-border) !important;
}

/* ─── Footer ──────────────────────────────────────────── */

footer {
  background: var(--color-body) !important;
  border-top: 1px solid var(--color-border) !important;
}

/* ─── Misc Overrides ──────────────────────────────────── */

.repository .repo-description {
  color: var(--color-text-light);
}

/* Toast notifications */
.ui.toast-container .toast {
  background: var(--color-box-body);
  border-color: var(--color-border);
}

/* Empty states */
.empty-placeholder {
  color: var(--color-text-light);
}