/* CodeClutch Dark Theme for Gitea */
/* Subdued dark palette — easy on the eyes */

gitea-theme-meta-info {
  --theme-display-name: "CodeClutch";
}

:root {
  --is-dark-theme: true;
  color-scheme: dark;

  /* ===== Primary Brand Colors (muted purple) ===== */
  --color-primary: #7c4dbd;
  --color-primary-dark-1: #6b3fa8;
  --color-primary-dark-2: #5a3493;
  --color-primary-dark-3: #49297e;
  --color-primary-dark-4: #381e69;
  --color-primary-dark-5: #271354;
  --color-primary-dark-6: #16083f;
  --color-primary-light-1: #8e63c7;
  --color-primary-light-2: #a07ad1;
  --color-primary-light-3: #b291db;
  --color-primary-light-4: #c4a8e5;
  --color-primary-light-5: #d6bfef;
  --color-primary-light-6: #e8d6f9;

  --color-primary-alpha-10: rgba(124, 77, 189, 0.1);
  --color-primary-alpha-20: rgba(124, 77, 189, 0.2);
  --color-primary-alpha-30: rgba(124, 77, 189, 0.3);
  --color-primary-alpha-40: rgba(124, 77, 189, 0.4);
  --color-primary-alpha-50: rgba(124, 77, 189, 0.5);

  /* ===== Backgrounds — very deep dark ===== */
  --color-body: #0f1017;
  --color-box-body: #161822;
  --color-box-body-highlight: #1c1f2e;

  --color-nav-bg: #0f1017;
  --color-nav-hover-bg: #1c1f2e;
  --color-nav-text: #b0b3bf;

  --color-bg: #0f1017;
  --color-card: #161822;
  --color-markup-table-row: #161822;
  --color-markup-code-block: #12141d;

  --color-input-background: #12141d;
  --color-input-border: #2a2d3d;
  --color-input-border-hover: #7c4dbd;
  --color-input-toggle-background: #2a2d3d;

  /* ===== Text — soft off-white ===== */
  --color-text: #b8bac6;
  --color-text-dark: #d8dae3;
  --color-text-light: #b8bac6;
  --color-text-light-1: #a0a3b0;
  --color-text-light-2: #7e8191;
  --color-text-light-3: #5c5f6f;

  /* ===== Links — muted blue ===== */
  --color-link: #7aa2d4;
  --color-link-hover: #9cb8e0;

  --color-secondary-text: #7e8191;
  --color-placeholder-text: #555869;

  /* ===== Borders ===== */
  --color-border: #252838;
  --color-light-border: #1e2130;
  --color-secondary-nav-bg: #161822;
  --color-menu: #161822;

  --color-shadow: rgba(0, 0, 0, 0.4);

  --color-button: #1c1f2e;
  --color-active-line: #1c1f2e;
  --color-hover: rgba(124, 77, 189, 0.08);

  --color-code-bg: #12141d;
  --color-code-sidebar-bg: #161822;

  /* ===== Diffs ===== */
  --color-diff-removed-word-bg: rgba(220, 80, 80, 0.25);
  --color-diff-added-word-bg: rgba(80, 170, 60, 0.25);
  --color-diff-removed-row-bg: rgba(220, 80, 80, 0.07);
  --color-diff-moved-row-bg: rgba(200, 150, 40, 0.07);
  --color-diff-added-row-bg: rgba(80, 170, 60, 0.07);
  --color-diff-removed-row-border: rgba(220, 80, 80, 0.15);
  --color-diff-added-row-border: rgba(80, 170, 60, 0.15);
  --color-diff-inactive: #2a2d3d;

  /* ===== Labels ===== */
  --color-label-text: #b8bac6;
  --color-label-bg: #1c1f2e;
  --color-label-active-bg: #7c4dbd;

  /* ===== Status — muted ===== */
  --color-error: #d45555;
  --color-error-text: #d45555;
  --color-error-bg: rgba(212, 85, 85, 0.08);
  --color-error-border: rgba(212, 85, 85, 0.2);
  --color-success: #4aad40;
  --color-success-text: #4aad40;
  --color-success-bg: rgba(74, 173, 64, 0.08);
  --color-success-border: rgba(74, 173, 64, 0.2);
  --color-warning: #d4a020;
  --color-warning-text: #d4a020;
  --color-warning-bg: rgba(212, 160, 32, 0.08);
  --color-warning-border: rgba(212, 160, 32, 0.2);
  --color-info: #5a8cc8;
  --color-info-text: #5a8cc8;
  --color-info-bg: rgba(90, 140, 200, 0.08);
  --color-info-border: rgba(90, 140, 200, 0.2);

  --fonts-proportional: -apple-system, "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif;
  --fonts-monospace: "JetBrains Mono", "SF Mono", "Cascadia Code", "Liberation Mono", Menlo, Monaco, Consolas, monospace;
}

/* ===== UI Overrides ===== */

.ui.secondary.pointing.menu .active.item {
  border-color: #7c4dbd !important;
}

.ui.primary.button,
.ui.primary.buttons .button {
  background: #7c4dbd !important;
  border: none !important;
  color: #e8e9ed !important;
  transition: background 0.2s ease;
}
.ui.primary.button:hover,
.ui.primary.buttons .button:hover {
  background: #8e63c7 !important;
}

::selection {
  background: rgba(124, 77, 189, 0.25);
  color: #d8dae3;
}

::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: #0f1017; }
::-webkit-scrollbar-thumb { background: #2a2d3d; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #3d4057; }

.tabular.menu .active.item,
.ui.tabular.menu .active.item {
  border-bottom-color: #7c4dbd !important;
  color: #d8dae3 !important;
}

.ui.label {
  background: #1c1f2e !important;
  color: #b8bac6 !important;
  border: 1px solid #252838 !important;
}

.ui.segment,
.ui.segments .segment {
  background: #161822 !important;
  border-color: #252838 !important;
}

.ui.dropdown .menu,
.ui.selection.dropdown .menu {
  background: #161822 !important;
  border-color: #252838 !important;
}
.ui.dropdown .menu > .item,
.ui.selection.dropdown .menu > .item {
  color: #b8bac6 !important;
  border-color: #1c1f2e !important;
}
.ui.dropdown .menu > .item:hover {
  background: #1c1f2e !important;
  color: #d8dae3 !important;
}

.page-footer {
  background: #0f1017 !important;
  border-top-color: #252838 !important;
}

.ui.input > input:focus,
textarea:focus,
.ui.selection.dropdown:focus,
.ui.selection.dropdown.active {
  border-color: #7c4dbd !important;
  box-shadow: 0 0 0 1px rgba(124, 77, 189, 0.15) !important;
}

.ui.positive.message {
  background: rgba(74, 173, 64, 0.08) !important;
  border-color: rgba(74, 173, 64, 0.2) !important;
  color: #4aad40 !important;
}
.ui.negative.message {
  background: rgba(212, 85, 85, 0.08) !important;
  border-color: rgba(212, 85, 85, 0.2) !important;
  color: #d45555 !important;
}

.ui.progress .bar {
  background: #7c4dbd !important;
}

.ui.toggle.checkbox input:checked ~ .box:before,
.ui.toggle.checkbox input:checked ~ label:before {
  background-color: #7c4dbd !important;
}