@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* ─── RADICAL GIT — Brand Theme ─── */

/* ── Pink primary applies to BOTH modes ── */
:root {
  --color-primary:          #ff0099;
  --color-primary-contrast: #ffffff;
  --color-primary-dark-1:   #ff33aa;
  --color-primary-dark-2:   #ff55bb;
  --color-primary-dark-3:   #ff88cc;
  --color-primary-dark-4:   #ffaadd;
  --color-primary-dark-5:   #ffccee;
  --color-primary-dark-6:   #ffddee;
  --color-primary-dark-7:   #ffeef7;
  --color-primary-light-1:  #e6008a;
  --color-primary-light-2:  #cc0077;
  --color-primary-light-3:  #aa0066;
  --color-primary-light-4:  #880055;
  --color-primary-light-5:  #660044;
  --color-primary-light-6:  #440033;
  --color-primary-light-7:  #330022;
  --color-primary-alpha-10: #ff009919;
  --color-primary-alpha-20: #ff009933;
  --color-primary-alpha-30: #ff00994b;
  --color-primary-alpha-40: #ff009966;
  --color-primary-alpha-50: #ff009980;
  --color-primary-alpha-60: #ff009999;
  --color-primary-alpha-70: #ff0099b3;
  --color-primary-alpha-80: #ff0099cc;
  --color-primary-alpha-90: #ff0099e1;
  --color-primary-hover:    var(--color-primary-light-1);
  --color-primary-active:   var(--color-primary-light-2);
  --color-accent:           var(--color-primary);
  --color-highlight-fg:     var(--color-primary-light-3);
  --color-highlight-bg:     var(--color-primary-alpha-20);
}

/* ── Dark mode: near-black steel palette ── */
[data-theme="forgejo-dark"] {
  --steel-900: #050505;
  --steel-850: #080808;
  --steel-800: #0a0a0a;
  --steel-750: #0e0e0e;
  --steel-700: #111111;
  --steel-650: #161616;
  --steel-600: #1c1c1c;
  --steel-550: #252525;
  --steel-500: #313131;
  --steel-450: #424242;
  --steel-400: #555555;
  --steel-350: #6a6a6a;
  --steel-300: #888888;
  --steel-250: #aaaaaa;
  --steel-200: #c0c0c0;
  --steel-150: #d4d4d4;
  --steel-100: #e8e6e2;

  --color-diff-added-row-bg:       #0d2a1a;
  --color-diff-removed-row-bg:     #2a0d1a;
  --color-diff-added-word-bg:      #1a5c35;
  --color-diff-removed-word-bg:    #5c1a35;
  --color-diff-added-row-border:   #1a5c35;
  --color-diff-removed-row-border: #5c1a35;
}

/* ── Light mode: keep Forgejo's palette, just pink accents ── */
[data-theme="forgejo-light"] {
  --color-diff-added-row-bg:       #d4f5e2;
  --color-diff-removed-row-bg:     #f5d4e8;
  --color-diff-added-word-bg:      #a8e8c4;
  --color-diff-removed-word-bg:    #e8a8c4;
}

/* ─── Typography ─── */
*, *::before, *::after {
  font-family: 'Roboto Mono', 'Courier New', monospace !important;
}
body { letter-spacing: -0.01em; }
h1, h2, h3, h4, h5, h6 {
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}

/* ─── Nav / Header ─── */
#navbar {
  border-bottom: 1px solid #ff009933 !important;
}
.navbar .brand, .navbar .item.brand, #navbar .brand {
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #ff0099 !important;
}

/* ─── Links ─── */
a { color: #ff0099 !important; }
a:hover { color: #ff33aa !important; text-decoration: none !important; }
.highlight a, .code-view a, pre a { color: inherit !important; }

/* ─── Primary buttons ─── */
.ui.primary.button,
.ui.primary.buttons .button {
  background-color: #ff0099 !important;
  color: #fff !important;
  border: none !important;
  font-weight: 600 !important;
}
.ui.primary.button:hover,
.ui.primary.buttons .button:hover  { background-color: #e6008a !important; }
.ui.primary.button:active,
.ui.primary.buttons .button:active { background-color: #cc0077 !important; }

/* ─── Orange hard-coded hits ─── */
.ui.orange.button, .ui.orange.label, .ui.orange.header,
.orange.text, .text.orange, [class*="orange"] svg { color: #ff0099 !important; }
.ui.orange.button { background-color: #ff0099 !important; }
svg[fill="#fb923c"], svg[stroke="#fb923c"],
[fill="#fb923c"], [stroke="#fb923c"],
[fill="#c2410c"], [stroke="#c2410c"] {
  fill: #ff0099 !important;
  stroke: #ff0099 !important;
}

/* ─── Labels / Badges ─── */
.ui.primary.label,
.ui.primary.labels .label,
.ui.red.label.notification_count,
.notification_count {
  background-color: #ff0099 !important;
  color: #fff !important;
}

/* ─── Input focus ─── */
input:focus, textarea:focus,
.ui.input.focus > input,
.ui.input > input:focus,
select:focus {
  border-color: #ff0099 !important;
  box-shadow: 0 0 0 2px #ff009933 !important;
  outline: none !important;
}

/* ─── Footer ─── */
.page-footer { border-top: 1px solid #ff009933 !important; }

/* ─── Selection ─── */
::selection { background: #ff009944 !important; color: #ffffff !important; }

/* ─── Scrollbars ─── */
::-webkit-scrollbar        { width: 5px; height: 5px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: #2a2a2a; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #ff0099; }

/* ─── Theme toggle button ─── */
#radical-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid #ff009955;
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
  color: var(--color-text);
  transition: border-color 0.15s, background 0.15s;
}
#radical-theme-toggle:hover {
  border-color: #ff0099;
  background: #ff009915;
}
#radical-theme-toggle svg {
  width: 16px;
  height: 16px;
  pointer-events: none;
}