/*
 * Moxi theme for Gitea
 * Dark base (built on gitea-dark) with an orange accent,
 * rounded borderless buttons and rounded inputs.
 *
 * Install: {CustomPath}/public/assets/css/theme-moxi.css
 */

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

/* Name + color scheme shown in the theme picker (newer Gitea versions) */
gitea-theme-meta-info {
  --theme-display-name: "Moxi";
  --theme-color-scheme: "dark";
}

/* ------------------------------------------------------------------ */
/* Colors                                                              */
/* ------------------------------------------------------------------ */
:root {
  /* Tell Gitea this is a dark theme (code editor, etc.) */
  --is-dark-theme: true;
  color-scheme: dark;

  /* --- Text (set here so it works even if the dark import fails) --- */
  --color-text: #e6e6ea;
  --color-text-dark: #f5f5f7;
  --color-text-light: #c4c4cc;
  --color-text-light-1: #a8a8b2;
  --color-text-light-2: #8c8c96;
  --color-text-light-3: #707079;
  --color-placeholder-text: #6a6a73;
  --color-nav-text: #e6e6ea;
  --color-secondary-nav-text: #c4c4cc;
  --color-caret: #e6e6ea;

  /* --- Borders / secondary greys --- */
  --color-light-border: #ffffff1a;
  --color-secondary: #2a2a30;
  --color-secondary-dark-1: #33333a;
  --color-secondary-dark-2: #3d3d45;
  --color-secondary-dark-3: #4a4a53;
  --color-secondary-dark-4: #5a5a64;
  --color-secondary-dark-5: #6c6c76;
  --color-secondary-dark-6: #808089;
  --color-secondary-dark-7: #96969f;
  --color-secondary-dark-8: #ababb3;
  --color-secondary-dark-9: #c0c0c7;
  --color-secondary-dark-10: #d4d4da;
  --color-secondary-dark-11: #e2e2e7;
  --color-secondary-dark-12: #eeeef2;
  --color-secondary-dark-13: #f7f7f9;
  --color-secondary-light-1: #232328;
  --color-secondary-light-2: #1e1e22;
  --color-secondary-light-3: #19191d;
  --color-secondary-light-4: #151518;
  --color-secondary-alpha-10: #2a2a3019;
  --color-secondary-alpha-20: #2a2a3033;
  --color-secondary-alpha-30: #2a2a304b;
  --color-secondary-alpha-40: #2a2a3066;
  --color-secondary-alpha-50: #2a2a3080;
  --color-secondary-alpha-60: #2a2a3099;
  --color-secondary-alpha-70: #2a2a30b3;
  --color-secondary-alpha-80: #2a2a30cc;
  --color-secondary-alpha-90: #2a2a30e1;
  --color-secondary-button: #2a2a30;
  --color-secondary-hover: #33333a;
  --color-secondary-active: #3d3d45;

  /* --- Status messages (success / error / warning / info) --- */
  --color-success-bg: #12301c;
  --color-success-border: #1f5a33;
  --color-success-text: #8fe0a8;
  --color-error-bg: #3a1616;
  --color-error-border: #6b2424;
  --color-error-text: #ff9b9b;
  --color-warning-bg: #3a2c10;
  --color-warning-border: #6b511c;
  --color-warning-text: #ffd27a;
  --color-info-bg: #142a3a;
  --color-info-border: #234a66;
  --color-info-text: #8ec8ff;

  /* --- Orange accent --- */
  --color-primary: #ff7a1a;
  --color-primary-contrast: #ffffff;
  --color-primary-hover: #ff8c3a;
  --color-primary-active: #e86a0c;

  --color-primary-dark-1: #f06d0f;
  --color-primary-dark-2: #e06308;
  --color-primary-dark-3: #c85805;
  --color-primary-dark-4: #a84a05;
  --color-primary-dark-5: #8a3d04;
  --color-primary-dark-6: #6b2f03;
  --color-primary-dark-7: #4d2202;

  --color-primary-light-1: #ff8a33;
  --color-primary-light-2: #ff9a4d;
  --color-primary-light-3: #ffaa66;
  --color-primary-light-4: #ffbb85;
  --color-primary-light-5: #ffcca3;
  --color-primary-light-6: #ffddc2;
  --color-primary-light-7: #ffeee0;

  --color-primary-alpha-10: #ff7a1a19;
  --color-primary-alpha-20: #ff7a1a33;
  --color-primary-alpha-30: #ff7a1a4c;
  --color-primary-alpha-40: #ff7a1a66;
  --color-primary-alpha-50: #ff7a1a80;
  --color-primary-alpha-60: #ff7a1a99;
  --color-primary-alpha-70: #ff7a1ab2;
  --color-primary-alpha-80: #ff7a1acc;
  --color-primary-alpha-90: #ff7a1ae5;

  /* --- Darker backgrounds --- */
  --color-body: #0d0d0f;
  --color-nav-bg: #0a0a0c;
  --color-nav-hover-bg: #1c1c21;
  --color-secondary-nav-bg: #0f0f12;
  --color-header-wrapper: #111114;

  --color-box-header: #18181c;
  --color-box-body: #131316;
  --color-box-body-highlight: #1a1a1f;

  --color-menu: #141417;
  --color-card: #141417;
  --color-light: #ffffff08;
  --color-hover: #ffffff0d;
  --color-active: #ffffff14;

  --color-input-background: #18181b;
  --color-input-border: #2a2a30;
  --color-input-border-hover: #3a3a42;

  --color-secondary-bg: #18181c;

  --color-markup-code-block: #101013;
  --color-code-bg: #101013;

  /* --- Rounding for boxes, cards, menus --- */
  --border-radius: 8px;
  --border-radius-medium: 10px;
}

/* Fallback: force readable text even if some variable is missed */
body {
  color: var(--color-text);
  background: var(--color-body);
}

/* Links and focus rings in the accent color */
a {
  color: var(--color-primary);
}
a:hover {
  color: var(--color-primary-hover);
}

/* ------------------------------------------------------------------ */
/* Buttons: rounded, no borders                                         */
/* ------------------------------------------------------------------ */
.ui.button,
.ui.buttons .button {
  border-radius: 10px !important;
  border: none !important;
  box-shadow: none !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Grouped buttons (e.g. Watch | 3, Star | 5) stay one connected pill */
.ui.buttons .button:first-child { border-radius: 10px 0 0 10px !important; }
.ui.buttons .button:last-child  { border-radius: 0 10px 10px 0 !important; }
.ui.buttons .button:only-child  { border-radius: 10px !important; }

/* Secondary / basic buttons get a fill so they don't vanish without a border */
.ui.basic.button,
.ui.button:not(.primary):not(.red):not(.green):not(.blue) {
  background: #222227 !important;
}
.ui.basic.button:hover,
.ui.button:not(.primary):not(.red):not(.green):not(.blue):hover {
  background: #2c2c33 !important;
}

/* Primary buttons use the orange accent */
.ui.primary.button,
.ui.primary.buttons .button {
  background: var(--color-primary) !important;
  color: var(--color-primary-contrast) !important;
}
.ui.primary.button:hover,
.ui.primary.buttons .button:hover {
  background: var(--color-primary-hover) !important;
}
.ui.primary.button:active,
.ui.primary.buttons .button:active {
  background: var(--color-primary-active) !important;
}

/* ------------------------------------------------------------------ */
/* Inputs and dropdowns                                                 */
/* ------------------------------------------------------------------ */
.ui.input input,
.ui.dropdown,
.ui.selection.dropdown,
.ui.form input:not([type="checkbox"]):not([type="radio"]),
.ui.form textarea,
.ui.form select {
  border-radius: 10px !important;
}

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