@import url("/assets/css/theme-forgejo-dark.css");

/*
 * Yūgen Forgejo theme
 * GitHub-like information density, black-violet surfaces, restrained glass.
 * Base: Forgejo's bundled dark theme. This file only overrides tokens and
 * surface treatment, so upgrades keep the upstream layout and accessibility.
 */

:root {
  --yugen-bg: #07050d;
  --yugen-bg-elevated: #0e0a1a;
  --yugen-surface: rgba(18, 12, 32, 0.72);
  --yugen-surface-strong: rgba(14, 9, 26, 0.94);
  --yugen-border: rgba(168, 139, 250, 0.16);
  --yugen-border-strong: rgba(196, 181, 253, 0.34);
  --yugen-text: #f5f2ff;
  --yugen-muted: #b9add4;
  --yugen-dim: #8f83ad;
  --yugen-purple: #8b5cf6;
  --yugen-purple-light: #a78bfa;
  --yugen-purple-pale: #c4b5fd;
  --yugen-teal: #2dd4bf;

  /* Purple-tinted neutral scale. All upstream steel-derived tokens follow. */
  --steel-900: #07050d;
  --steel-850: #0a0712;
  --steel-800: #0d0918;
  --steel-750: #120d20;
  --steel-700: #171128;
  --steel-650: #1d1533;
  --steel-600: #251b40;
  --steel-550: #2e2250;
  --steel-500: #3a2c62;
  --steel-450: #4a3a78;
  --steel-400: #5b4a8c;
  --steel-350: #6d5ca0;
  --steel-300: #8171b3;
  --steel-250: #9788c6;
  --steel-200: #ada0d8;
  --steel-150: #c6bce8;
  --steel-100: #e4ddff;

  /* Primary: violet instead of Forgejo orange. */
  --color-primary: #a78bfa;
  --color-primary-contrast: #09060f;
  --color-primary-dark-1: #c4b5fd;
  --color-primary-dark-2: #ddd6fe;
  --color-primary-dark-3: #ede9fe;
  --color-primary-dark-4: #f5f3ff;
  --color-primary-dark-5: #faf5ff;
  --color-primary-dark-6: #fdf4ff;
  --color-primary-dark-7: #ffffff;
  --color-primary-light-1: #8b5cf6;
  --color-primary-light-2: #7c3aed;
  --color-primary-light-3: #6d28d9;
  --color-primary-light-4: #5b21b6;
  --color-primary-light-5: #4c1d95;
  --color-primary-light-6: #3b1578;
  --color-primary-light-7: #2e1065;
  --color-primary-alpha-10: #8b5cf61a;
  --color-primary-alpha-20: #8b5cf633;
  --color-primary-alpha-30: #8b5cf64d;
  --color-primary-alpha-40: #8b5cf666;
  --color-primary-alpha-50: #8b5cf680;
  --color-primary-alpha-60: #8b5cf699;
  --color-primary-alpha-70: #8b5cf6b3;
  --color-primary-alpha-80: #8b5cf6cc;
  --color-primary-alpha-90: #8b5cf6e6;
  --color-primary-hover: #b9a6ff;
  --color-primary-active: #7c3aed;

  /* Secondary surfaces and borders. */
  --color-secondary: #1b1430;
  --color-secondary-dark-1: #2a2048;
  --color-secondary-dark-2: #332752;
  --color-secondary-dark-3: #3d2f60;
  --color-secondary-dark-4: #4a3a72;
  --color-secondary-dark-5: #5a4888;
  --color-secondary-dark-6: #6d5aa0;
  --color-secondary-dark-7: #8170b5;
  --color-secondary-dark-8: #9788c9;
  --color-secondary-dark-9: #b0a3dc;
  --color-secondary-dark-10: #c9bfea;
  --color-secondary-dark-11: #ddd6f5;
  --color-secondary-dark-12: #ece8fa;
  --color-secondary-dark-13: #f6f3ff;
  --color-secondary-light-1: #151026;
  --color-secondary-light-2: #1b1430;
  --color-secondary-light-3: #211938;
  --color-secondary-light-4: #281e42;
  --color-secondary-alpha-10: #1b143019;
  --color-secondary-alpha-20: #1b143033;
  --color-secondary-alpha-30: #1b14304d;
  --color-secondary-alpha-40: #1b143066;
  --color-secondary-alpha-50: #1b143080;
  --color-secondary-alpha-60: #1b143099;
  --color-secondary-alpha-70: #1b1430b3;
  --color-secondary-alpha-80: #1b1430cc;
  --color-secondary-alpha-90: #1b1430e6;
  --color-secondary-hover: #241b3d;
  --color-secondary-active: #2d224b;

  /* Core surfaces. */
  --color-body: var(--yugen-bg);
  --color-box-header: #0f0a1c;
  --color-box-body: var(--yugen-surface);
  --color-box-body-highlight: #151025;
  --color-text-dark: #ffffff;
  --color-text: var(--yugen-text);
  --color-text-light: #d8d0f0;
  --color-text-light-1: #cfc5e8;
  --color-text-light-2: var(--yugen-muted);
  --color-text-light-3: #a99cc6;
  --color-footer: #08060f;
  --color-timeline: #241b3d;
  --color-input-text: var(--yugen-text);
  --color-input-background: rgba(18, 12, 32, 0.78);
  --color-input-toggle-background: #1a1230;
  --color-input-border: rgba(168, 139, 250, 0.22);
  --color-input-border-hover: rgba(196, 181, 253, 0.45);
  --color-header-wrapper: rgba(9, 6, 16, 0.72);
  --color-header-wrapper-transparent: rgba(9, 6, 16, 0);
  --color-light: rgba(255, 255, 255, 0.035);
  --color-light-border: rgba(255, 255, 255, 0.09);
  --color-hover: rgba(139, 92, 246, 0.12);
  --color-active: rgba(139, 92, 246, 0.2);
  --color-menu: rgba(14, 9, 26, 0.96);
  --color-card: rgba(18, 12, 32, 0.72);
  --color-markup-table-row: rgba(255, 255, 255, 0.025);
  --color-markup-code-block: rgba(9, 6, 16, 0.72);
  --color-markup-code-inline: rgba(139, 92, 246, 0.14);
  --color-button: rgba(27, 20, 48, 0.82);
  --color-code-bg: #090612;
  --color-shadow: rgba(0, 0, 0, 0.55);
  --color-secondary-bg: #100b1d;
  --color-text-focus: #ffffff;
  --color-expand-button: #2a2048;
  --color-placeholder-text: var(--yugen-dim);
  --color-editor-line-highlight: rgba(139, 92, 246, 0.12);
  --color-project-board-bg: #120d20;
  --color-project-board-dark-label: var(--yugen-muted);
  --color-caret: var(--yugen-purple-pale);
  --color-reaction-bg: rgba(255, 255, 255, 0.045);
  --color-reaction-active-bg: rgba(139, 92, 246, 0.28);
  --color-reaction-hover-bg: rgba(139, 92, 246, 0.36);
  --color-tooltip-text: #ffffff;
  --color-tooltip-bg: rgba(7, 5, 13, 0.96);
  --color-nav-bg: rgba(8, 5, 14, 0.72);
  --color-nav-hover-bg: rgba(139, 92, 246, 0.14);
  --color-nav-text: var(--yugen-text);
  --color-secondary-nav-bg: rgba(10, 7, 18, 0.55);
  --color-label-text: var(--yugen-text);
  --color-label-bg: rgba(139, 92, 246, 0.18);
  --color-label-hover-bg: rgba(139, 92, 246, 0.26);
  --color-label-active-bg: rgba(139, 92, 246, 0.34);
  --color-label-bg-alt: rgba(139, 92, 246, 0.24);
  --color-accent: var(--yugen-purple-light);
  --color-small-accent: #7c3aed;
  --color-highlight-fg: #ddd6fe;
  --color-highlight-bg: rgba(139, 92, 246, 0.2);
  --color-overlay-backdrop: rgba(4, 2, 9, 0.78);
  --checkerboard-color-1: #2a2048;
  --checkerboard-color-2: #1a1230;

  /* Console. */
  --color-console-fg: var(--yugen-text);
  --color-console-fg-subtle: #a99cc6;
  --color-console-bg: #08050f;
  --color-console-border: #2a2048;
  --color-console-hover-bg: rgba(139, 92, 246, 0.12);
  --color-console-active-bg: #2a2048;
  --color-console-menu-bg: #120d20;
  --color-console-menu-border: #3a2c62;

  /* GitHub-like diff colors with a violet undertone. */
  --color-diff-removed-word-bg: #5c1f35;
  --color-diff-added-word-bg: #1f4d36;
  --color-diff-removed-row-bg: #2a1020;
  --color-diff-moved-row-bg: #3d2a12;
  --color-diff-added-row-bg: #0f2a1e;
  --color-diff-removed-row-border: #7f2d4a;
  --color-diff-moved-row-border: #8a6420;
  --color-diff-added-row-border: #2d6b4a;
  --color-diff-inactive: #1a1230;

  /* Feedback surfaces. */
  --color-error-border: #7f2d4a;
  --color-error-bg: #3a1224;
  --color-error-bg-active: #4a1730;
  --color-error-bg-hover: #4a1730;
  --color-error-text: #ffe4ef;
  --color-success-border: #2d6b4a;
  --color-success-bg: #0f2a1e;
  --color-success-text: #c8f7dc;
  --color-warning-border: #8a6420;
  --color-warning-bg: #3a2a12;
  --color-warning-text: #fff3c4;
  --color-info-border: #3b3a8f;
  --color-info-bg: #1a1840;
  --color-info-text: #e4e1ff;

  /* Type and shape: GitHub-like density, slightly softer corners. */
  --fonts-regular: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --fonts-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --border-radius: 8px;
  --border-radius-full: 999px;
  --line-height-default: 1.5;
}

html {
  background: var(--yugen-bg);
}

body {
  background:
    radial-gradient(1100px 700px at 12% -8%, rgba(124, 58, 237, 0.22), transparent 62%),
    radial-gradient(900px 600px at 100% 0%, rgba(45, 212, 191, 0.08), transparent 55%),
    radial-gradient(900px 700px at 50% 110%, rgba(168, 85, 247, 0.12), transparent 60%),
    var(--yugen-bg) !important;
  background-attachment: fixed;
  color: var(--yugen-text);
}

::selection {
  background: rgba(139, 92, 246, 0.45) !important;
  color: #ffffff !important;
}

:focus-visible {
  outline: 2px solid rgba(196, 181, 253, 0.72);
  outline-offset: 2px;
}

/* Header: GitHub-like sticky glass bar. */
#navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(8, 5, 14, 0.68) !important;
  border-bottom: 1px solid var(--yugen-border) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

#navbar .item {
  border-radius: 8px;
  transition: background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

#navbar .item:hover,
#navbar .item.active {
  background: rgba(139, 92, 246, 0.16) !important;
  color: #ffffff !important;
}

#navbar .item.active {
  box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.18);
}

#navbar-logo img,
#navbar-logo svg {
  filter: drop-shadow(0 0 12px rgba(139, 92, 246, 0.35));
}

/* Main panels: translucent, bordered, softly lit. */
.ui.segment:not(.attached),
.ui.card,
.ui.cards > .card,
.ui.message,
.flex-list,
.repository .repository-summary {
  border-color: var(--yugen-border) !important;
  border-radius: var(--border-radius) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

.ui.segment,
.ui.card,
.ui.cards > .card,
.ui.message,
.flex-list,
.repository .repository-summary,
.repository .diff-file-box .header,
.repository .comment .comment-container {
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.ui.card,
.ui.cards > .card {
  background: rgba(18, 12, 32, 0.62) !important;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.ui.card:hover,
.ui.cards > .card:hover {
  border-color: rgba(196, 181, 253, 0.28) !important;
  box-shadow:
    0 14px 44px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(139, 92, 246, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  transform: translateY(-1px);
}

/* Repository / issue lists. */
.flex-list {
  background: rgba(12, 8, 22, 0.55);
  overflow: hidden;
}

.flex-list > .flex-item {
  padding: 12px 16px;
  transition: background-color 0.16s ease;
}

.flex-list > .flex-item:hover {
  background: rgba(139, 92, 246, 0.08);
}

.flex-list > .flex-item + .flex-item {
  border-top-color: var(--yugen-border) !important;
}

/* Menus and tabs. */
.ui.menu {
  background: rgba(12, 8, 22, 0.62);
  border-color: var(--yugen-border);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.ui.menu .item {
  border-radius: 7px;
}

.ui.menu .active.item {
  background: rgba(139, 92, 246, 0.16) !important;
  color: #ffffff !important;
}

.ui.secondary.pointing.menu .active.item {
  background: transparent !important;
  border-color: transparent !important;
  border-bottom-color: var(--yugen-purple-light) !important;
  box-shadow: inset 0 -2px 0 var(--yugen-purple-light);
  color: #ffffff !important;
}

.ui.tabular.menu .active.item {
  background: rgba(139, 92, 246, 0.12) !important;
  border-color: var(--yugen-border) !important;
  border-bottom-color: var(--yugen-purple-light) !important;
}

.ui.secondary.menu.tabs-with-labels .item.active,
.ui.secondary.menu.tabs-with-labels .active.item,
.ui.tabular.menu.repos-filter .item.active,
.ui.secondary.pointing.menu.repos-filter .item.active {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid var(--yugen-purple-light) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #ffffff !important;
}

/* Contribution heatmap: visible empty cells and rounded squares. */
#user-heatmap .vch__day__square {
  rx: 2px;
  ry: 2px;
}

#user-heatmap .vch__day__square[style*="--color-secondary"] {
  fill: rgba(168, 139, 250, 0.12) !important;
}

#user-heatmap .vch__day__square[style*="--color-primary"] {
  fill: #a78bfa !important;
}

/* Buttons: GitHub-like neutral glass with a violet primary action. */
.ui.button {
  border: 1px solid rgba(168, 139, 250, 0.18);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(37, 27, 64, 0.82), rgba(22, 16, 38, 0.82));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 8px 24px rgba(0, 0, 0, 0.12);
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.ui.button:hover {
  border-color: rgba(196, 181, 253, 0.38);
  background: linear-gradient(180deg, rgba(48, 35, 82, 0.9), rgba(30, 22, 52, 0.9));
  box-shadow:
    0 0 0 3px rgba(139, 92, 246, 0.1),
    0 8px 24px rgba(0, 0, 0, 0.18);
}

.ui.button:active {
  transform: translateY(1px);
}

.ui.primary.button,
.ui.primary.buttons .button {
  background: linear-gradient(180deg, #8b5cf6, #6d28d9) !important;
  border-color: rgba(196, 181, 253, 0.35) !important;
  color: #ffffff !important;
  box-shadow:
    0 8px 24px rgba(109, 40, 217, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

.ui.primary.button:hover,
.ui.primary.buttons .button:hover {
  background: linear-gradient(180deg, #9f7aea, #7c3aed) !important;
}

/* Inputs and dropdowns. */
.ui.input:not(.action) input,
.ui.form input:not([type]),
.ui.form input[type="date"],
.ui.form input[type="datetime-local"],
.ui.form input[type="email"],
.ui.form input[type="number"],
.ui.form input[type="password"],
.ui.form input[type="search"],
.ui.form input[type="tel"],
.ui.form input[type="text"],
.ui.form input[type="time"],
.ui.form input[type="url"],
.ui.form textarea,
.ui.form select,
.ui.selection.dropdown {
  background: rgba(14, 9, 26, 0.72) !important;
  border-color: rgba(168, 139, 250, 0.18) !important;
  border-radius: 8px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.ui.input:not(.action) input:focus,
.ui.form input:focus,
.ui.form textarea:focus,
.ui.form select:focus,
.ui.selection.dropdown:focus {
  border-color: rgba(196, 181, 253, 0.55) !important;
  box-shadow:
    0 0 0 3px rgba(139, 92, 246, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

/* Dropdowns, popups and modals get the strongest glass treatment. */
.ui.dropdown .menu,
.ui.popup,
.ui.modal {
  background: var(--yugen-surface-strong) !important;
  border: 1px solid var(--yugen-border) !important;
  border-radius: 10px !important;
  box-shadow:
    0 18px 60px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}

.ui.modal {
  background: rgba(10, 7, 18, 0.92) !important;
}

/* Checkboxes and radios follow the violet accent. */
.ui.checkbox label:before {
  background: rgba(14, 9, 26, 0.72);
  border: 1px solid rgba(168, 139, 250, 0.22);
  border-radius: 5px;
}

.ui.checkbox label:hover:before {
  border-color: rgba(196, 181, 253, 0.45);
}

.ui.checkbox input:checked ~ label:before,
.ui.checkbox input:indeterminate ~ label:before {
  background: linear-gradient(180deg, #8b5cf6, #6d28d9) !important;
  border-color: rgba(196, 181, 253, 0.5) !important;
  color: #ffffff !important;
}

.ui.toggle.checkbox input:checked ~ label:before {
  background: #8b5cf6 !important;
}

.ui.radio.checkbox input:checked ~ label:after {
  background: #a78bfa !important;
}

/* Warning messages keep an amber cue without breaking the dark-violet surface. */
.ui.warning.message {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.14), rgba(18, 12, 32, 0.72) 42%) !important;
  border-color: rgba(245, 158, 11, 0.28) !important;
  color: #ffe9b3 !important;
  box-shadow: inset 3px 0 0 rgba(245, 158, 11, 0.7);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.ui.warning.message a {
  color: #fcd34d !important;
}

/* Tables: GitHub-like headers and quiet row separation. */
.ui.table {
  border-color: var(--yugen-border) !important;
  border-radius: 10px;
  overflow: hidden;
}

.ui.table thead th {
  background: rgba(139, 92, 246, 0.08) !important;
  color: var(--color-text-light);
  font-weight: 600;
}

.ui.table tbody tr:hover {
  background: rgba(139, 92, 246, 0.08) !important;
}

.ui.striped.table tbody tr:nth-child(2n) {
  background: rgba(255, 255, 255, 0.018) !important;
}

/* Issue and PR conversation surfaces. */
.repository .comment .comment-container {
  background: rgba(14, 9, 26, 0.62) !important;
  border-color: var(--yugen-border) !important;
  border-radius: 10px;
}

.repository .diff-file-box .header {
  background: rgba(18, 12, 32, 0.78) !important;
  border-color: var(--yugen-border) !important;
}

.repository .diff-file-box .file-body.file-code {
  background: #08050f !important;
}

/* Labels become GitHub-like pills. */
.ui.label {
  border-radius: 999px;
  font-weight: 500;
}

/* Markdown and code. */
.markup code {
  background: rgba(139, 92, 246, 0.14) !important;
  color: #e9e2ff;
}

.markup pre,
.markup pre code {
  background: rgba(7, 5, 13, 0.72) !important;
}

/* GitHub dark syntax palette. */
.chroma .c,
.chroma .c1,
.chroma .ch,
.chroma .cm {
  color: #8b949e;
}

.chroma .k,
.chroma .kc,
.chroma .kd,
.chroma .kn,
.chroma .kp,
.chroma .kr,
.chroma .o,
.chroma .ow {
  color: #ff7b72;
}

.chroma .s,
.chroma .s1,
.chroma .s2,
.chroma .sa,
.chroma .sb,
.chroma .sc,
.chroma .sd,
.chroma .se,
.chroma .sh,
.chroma .si,
.chroma .sr,
.chroma .ss,
.chroma .sx {
  color: #a5d6ff;
}

.chroma .nf,
.chroma .nx {
  color: #d2a8ff;
}

.chroma .nb,
.chroma .no,
.chroma .nv {
  color: #79c0ff;
}

.chroma .nt {
  color: #7ee787;
}

.chroma .na {
  color: #79c0ff;
}

.chroma .m,
.chroma .mb,
.chroma .mf,
.chroma .mh,
.chroma .mi,
.chroma .mo,
.chroma .il {
  color: #79c0ff;
}

.chroma .gd {
  color: #ffdcd7;
  background-color: #67060c;
}

.chroma .gi {
  color: #d1f7d6;
  background-color: #033a16;
}

/* Footer. */
.page-footer {
  background: rgba(7, 5, 13, 0.72) !important;
  border-top: 1px solid var(--yugen-border) !important;
  color: var(--color-text-light-2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Scrollbars. */
* {
  scrollbar-color: rgba(139, 92, 246, 0.35) transparent;
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.28);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 92, 246, 0.45);
  background-clip: padding-box;
}

/* Opaque fallback for browsers without backdrop-filter. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #navbar,
  .ui.segment,
  .ui.card,
  .ui.cards > .card,
  .ui.message,
  .flex-list,
  .ui.menu,
  .ui.dropdown .menu,
  .ui.popup,
  .ui.modal,
  .repository .repository-summary,
  .repository .comment .comment-container,
  .page-footer {
    background-color: #0e0a1a !important;
  }
}

@media (max-width: 767.98px) {
  #navbar {
    padding: 0 8px;
  }

  .page-content {
    padding-left: 12px;
    padding-right: 12px;
  }

  .ui.segment:not(.attached),
  .ui.card,
  .ui.message,
  .flex-list {
    border-radius: 10px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}