/* ==========================================================================
   Puffbase - Slime theme for the code forge
   Palette: purple hsl(275 80% 55%), slime #b1f150, deep-violet dark
   ========================================================================== */

:root {
  /* base */
  --color-body: #0d0714;
  --color-text: #efe9f7;
  --color-text-light: #b7a8cc;
  --color-text-dark: #f4effc;
  --color-footer: #0a0510;
  --color-timeline: #3b2a52;
  --color-input-text: #efe9f7;
  --color-input-background: #171023;
  --color-input-border: #3b2a52;
  --color-input-border-hover: #6b4a9a;
  --color-input-toggle-background: #171023;
  --color-input-toggle-border: #3b2a52;
  --color-navbar: #150b20;
  --color-navbar-transparent: rgba(21, 11, 32, 0.92);
  --color-light: #1c1229;
  --color-light-mimic-enabled: rgba(177, 241, 80, 0.08);
  --color-light-border: #3b2a52;
  --color-hover: #241636;
  --color-active: #2e1c45;
  --color-menu: #1a0f28;
  --color-card: #181025;
  --color-box: #161022;
  --color-box-header: #1e1430;
  --color-markup-table-row: #1c1329;
  --color-markup-code-block: #120b1d;
  --color-markup-code-inline: #1e1430;
  --color-code-bg: #120b1d;
  --color-code-sidebar-bg: #0f0919;
  --color-code-line-active: #2a1b40;
  --color-button: #241636;
  --color-button-hover: #2e1c45;
  --color-console-fg: #efe9f7;
  --color-console-bg: #120b1d;
  --color-console-menu-bg: #1a0f28;
  --color-console-menu-border: #3b2a52;
  --color-console-active-bg: #2e1c45;
  --color-diff-addition: rgba(177, 241, 80, 0.14);
  --color-diff-deletion: rgba(230, 80, 120, 0.14);
  --color-diff-inactive: rgba(183, 168, 204, 0.08);
  --color-error-bg: #3a1224;
  --color-error-text: #ff9db8;
  --color-error-border: #6d1f3d;
  --color-warning-bg: #33250e;
  --color-warning-text: #f0c674;
  --color-warning-border: #6d501f;
  --color-success-bg: #1a2b0e;
  --color-success-text: #b1f150;
  --color-success-border: #3d5c1f;
  --color-info-bg: #1a1030;
  --color-info-text: #c4b0e8;
  --color-info-border: #452b75;
  --color-tooltip-bg: #241636;
  --color-tooltip-text: #efe9f7;
  --color-avatar-border: #3b2a52;
  --color-list-header-bg: #1e1430;
  --color-list-header-text: #b7a8cc;

  /* primary - puffbase purple */
  --color-primary: #a03df0;
  --color-primary-contrast: #ffffff;
  --color-primary-text: #c99df5;
  --color-primary-dark-1: #8f2bd8;
  --color-primary-dark-2: #7c22bf;
  --color-primary-dark-3: #6b1aa6;
  --color-primary-dark-4: #5a158c;
  --color-primary-light-1: #b45ef5;
  --color-primary-light-2: #c682f8;
  --color-primary-light-3: #d5a3fa;
  --color-primary-light-4: #e4c2fc;
  --color-primary-alpha-10: rgba(160, 61, 240, 0.1);
  --color-primary-alpha-20: rgba(160, 61, 240, 0.2);
  --color-primary-alpha-30: rgba(160, 61, 240, 0.3);
  --color-primary-alpha-40: rgba(160, 61, 240, 0.4);
  --color-primary-alpha-50: rgba(160, 61, 240, 0.5);
  --color-primary-alpha-60: rgba(160, 61, 240, 0.6);
  --color-primary-alpha-70: rgba(160, 61, 240, 0.7);
  --color-primary-alpha-80: rgba(160, 61, 240, 0.8);
  --color-primary-alpha-90: rgba(160, 61, 240, 0.9);

  /* secondary - slime green */
  --color-secondary: #b1f150;
  --color-secondary-dark-1: #97d93a;
  --color-secondary-dark-2: #7fba2c;
  --color-secondary-light-1: #c4f578;
  --color-secondary-light-2: #d7f8a0;
  --color-secondary-alpha-10: rgba(177, 241, 80, 0.1);
  --color-secondary-alpha-20: rgba(177, 241, 80, 0.2);
  --color-secondary-alpha-40: rgba(177, 241, 80, 0.4);

  --fonts-regular: "Space Grotesk", "Inter", -apple-system, "Segoe UI", sans-serif;
  --fonts-monospace: "JetBrains Mono", Menlo, Consolas, monospace;
  --fonts-emoji: "Noto Color Emoji", sans-serif;
  --border-radius: 8px;
  --border-radius-medium: 8px;
  --border-radius-small: 6px;
}

/* --- ambient slime atmosphere ------------------------------------------- */

body {
  background:
    radial-gradient(70% 55% at 18% -8%, rgba(160, 61, 240, 0.22), transparent 62%),
    radial-gradient(55% 45% at 92% 4%, rgba(177, 241, 80, 0.07), transparent 60%),
    radial-gradient(80% 60% at 50% 115%, rgba(124, 34, 191, 0.18), transparent 65%),
    var(--color-body) !important;
  background-attachment: fixed !important;
}

/* --- top slime strip (injected by body_outer_pre.tmpl) ------------------- */

.puffbase-strip {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  background: linear-gradient(90deg, #1a0f28, #241636 45%, #1a0f28);
  border-bottom: 1px solid rgba(177, 241, 80, 0.25);
  font-family: "JetBrains Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}
.puffbase-strip .drip {
  height: 14px;
  width: 220px;
  background: url("/assets/img/ooze-drip-top.webp") repeat-x left center / auto 100%;
  filter: drop-shadow(0 0 6px rgba(177, 241, 80, 0.35));
  flex: 1;
  opacity: 0.8;
}
.puffbase-strip a {
  color: #b1f150;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  text-shadow: 0 0 10px rgba(177, 241, 80, 0.45);
}
.puffbase-strip img { height: 18px; width: 18px; }
.puffbase-strip .tag { color: #b7a8cc; letter-spacing: 0.18em; }

/* --- navbar -------------------------------------------------------------- */

.ui.secondary.pointing.menu, #navbar, .ui.menu {
  background: var(--color-navbar) !important;
  border-bottom: 1px solid #3b2a52 !important;
  box-shadow: 0 2px 18px rgba(124, 34, 191, 0.25) !important;
}
#navbar .item, .ui.menu .item { color: var(--color-text-light) !important; }
#navbar .item:hover, .ui.menu .item:hover { color: #b1f150 !important; }
#navbar .item.active { color: #efe9f7 !important; border-bottom-color: #b1f150 !important; }

/* --- cards, segments, headers -------------------------------------------- */

.ui.segment, .ui.segments .segment, .repository .ui.segment,
.ui.attached.segment, .ui.cards .card, .ui.card {
  background: var(--color-card) !important;
  border: 1px solid var(--color-light-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 14px rgba(124, 34, 191, 0.12) !important;
}
.ui.attached.header {
  background: var(--color-box-header) !important;
  border-color: var(--color-light-border) !important;
  color: var(--color-text) !important;
}
.ui.divider, .ui.horizontal.divider { border-top-color: #2c1c42 !important; color: #b7a8cc !important; }

/* --- buttons -------------------------------------------------------------- */

.ui.button, .ui.basic.button {
  border-radius: 6px !important;
}
.ui.primary.button, .ui.green.button {
  background: linear-gradient(135deg, #8f2bd8, #a03df0) !important;
  color: #fff !important;
  box-shadow: 0 0 14px rgba(160, 61, 240, 0.35) !important;
}
.ui.primary.button:hover, .ui.green.button:hover {
  background: linear-gradient(135deg, #a03df0, #b45ef5) !important;
  box-shadow: 0 0 20px rgba(160, 61, 240, 0.55) !important;
}
.ui.basic.button {
  background: var(--color-button) !important;
  color: var(--color-text) !important;
  border: 1px solid #3b2a52 !important;
  box-shadow: none !important;
}
.ui.basic.button:hover {
  background: var(--color-button-hover) !important;
  border-color: #6b4a9a !important;
  color: #b1f150 !important;
}

/* --- repo header + tabs ---------------------------------------------------- */

.repository .ui.secondary.pointing.menu .item.active {
  border-bottom-color: #a03df0 !important;
  color: #efe9f7 !important;
}
.ui.label { background: #241636 !important; color: #c99df5 !important; border: 1px solid #3b2a52 !important; }
.ui.label.green, .green.label { background: rgba(177,241,80,0.15) !important; color: #b1f150 !important; border-color: rgba(177,241,80,0.4) !important; }

/* --- tables / lists --------------------------------------------------------- */

.ui.table, .ui.table thead th {
  background: transparent !important;
  border-color: #2c1c42 !important;
  color: var(--color-text) !important;
}
.ui.table thead th { background: var(--color-box-header) !important; }
.ui.table tr:hover { background: var(--color-hover) !important; }
.ui.list .item, .ui.relaxed.list .item { border-color: #241636 !important; }

/* --- code ---------------------------------------------------------------- */

.code-view, .markup, pre, code { font-family: "JetBrains Mono", Menlo, monospace !important; }
code, pre, .markup pre { background: var(--color-code-bg) !important; border: 1px solid #2c1c42 !important; border-radius: 6px !important; }
.chroma { background: var(--color-code-bg) !important; }

/* --- forms --------------------------------------------------------------- */

.ui.form input, .ui.form textarea, .ui.form select, .ui.input input {
  background: var(--color-input-background) !important;
  color: var(--color-input-text) !important;
  border: 1px solid var(--color-input-border) !important;
  border-radius: 6px !important;
}
.ui.form input:focus, .ui.form textarea:focus {
  border-color: #a03df0 !important;
  box-shadow: 0 0 0 2px rgba(160, 61, 240, 0.25) !important;
}

/* --- accents: green everywhere it counts ----------------------------------- */

a { color: #c99df5; }
a:hover { color: #b1f150; }
.ui.progress .bar, .ui.progress.success .bar { background: #b1f150 !important; }
.octicon-check-circle-fill, .text.green, .ui.text.green { color: #b1f150 !important; }
.svg.octicon-git-pull-request, .text.purple { color: #c99df5 !important; }

/* --- footer ---------------------------------------------------------------- */

footer, .page-footer {
  background: var(--color-footer) !important;
  border-top: 1px solid #2c1c42 !important;
  color: #6e5a8a !important;
}
footer a { color: #8f7aa8 !important; }
footer a:hover { color: #b1f150 !important; }

/* --- scrollbars -------------------------------------------------------------- */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0f0919; }
::-webkit-scrollbar-thumb { background: #3b2a52; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #6b4a9a; }