/* Satama theme for Forgejo — matches satama.io design tokens */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --s-bg:          #0c0d0e;
  --s-bg-elev:     #131416;
  --s-bg-elev-2:   #1a1c1f;
  --s-bg-input:    #1f2125;
  --s-line:        #24272c;
  --s-line-strong: #34383f;
  --s-fg:          #e8e9eb;
  --s-fg-dim:      #a3a7ae;
  --s-fg-muted:    #6b7079;
  --s-accent:      #3d6bca;
  --s-accent-dark: #305599;
  --s-accent-light:#5580d8;
  --s-accent-10:   rgba(61,107,202,0.10);
  --s-accent-20:   rgba(61,107,202,0.20);
  --steel-900:  #090a0b;
  --steel-875:  #0c0d0e;
  --steel-850:  #0f1012;
  --steel-800:  #131416;
  --steel-750:  #18191c;
  --steel-700:  #1a1c1f;
  --steel-650:  #1f2125;
  --steel-600:  #24272c;
  --steel-550:  #2c3038;
  --steel-500:  #363b43;
  --steel-450:  #42474f;
  --steel-400:  #52575f;
  --steel-350:  #636870;
  --steel-300:  #787e87;
  --steel-250:  #8b919a;
  --steel-200:  #a3a7ae;
  --steel-150:  #bfc3c9;
  --steel-100:  #e8e9eb;
  --steel-50:   #f2f3f4;
  --steel-0:    #ffffff;
  --zinc-900: #0d0d0d; --zinc-800: #171717; --zinc-700: #1e1e1e;
  --zinc-600: #272727; --zinc-500: #3a3a3a; --zinc-400: #525252;
  --zinc-300: #717171; --zinc-200: #a3a3a3; --zinc-100: #e5e5e5;
  --zinc-50:  #f5f5f5; --zinc-0:   #ffffff;
  --color-primary:           var(--s-accent);
  --color-primary-dark-1:    #2e508f;
  --color-primary-dark-2:    #264480;
  --color-primary-dark-3:    #1d3870;
  --color-primary-light-1:   var(--s-accent-light);
  --color-primary-light-2:   #6d93e0;
  --color-primary-light-3:   #8aa8e8;
  --color-primary-alpha-10:  var(--s-accent-10);
  --color-primary-alpha-20:  var(--s-accent-20);
  --color-primary-alpha-30:  rgba(61,107,202,0.30);
  --color-primary-alpha-50:  rgba(61,107,202,0.50);
  --color-primary-alpha-80:  rgba(61,107,202,0.80);
  --color-body:              var(--s-bg);
  --color-nav-bg:            var(--s-bg);
  --color-header-wrapper:    var(--s-bg-elev);
  --color-box-header:        var(--s-bg-elev);
  --color-box-body:          var(--s-bg-elev);
  --color-sidebar-bg:        var(--s-bg-elev);
  --color-card:              var(--s-bg-elev);
  --color-footer:            var(--s-bg-elev);
  --color-input-background:  var(--s-bg-input);
  --color-input-toggle-bg:   var(--s-bg-input);
  --color-hover:             var(--s-bg-elev-2);
  --color-active:            rgba(61,107,202,0.12);
  --color-menu-item-link:    var(--s-fg-dim);
  --color-button:            var(--s-bg-elev-2);
  --color-button-hover:      var(--s-bg-input);
  --color-timeline-badge-bg: var(--s-bg-elev-2);
  --color-code-bg:           var(--s-bg);
  --color-code-sidebar-bg:   var(--s-bg-elev);
  --color-code-unified-chunk-header-background: var(--s-bg-elev-2);
  --color-code-unified-chunk-header-border:     var(--s-line-strong);
  --color-text:             var(--s-fg);
  --color-text-dark:        var(--s-fg);
  --color-text-light-2:     var(--s-fg-dim);
  --color-text-light-3:     var(--s-fg-muted);
  --color-placeholder-text: var(--s-fg-muted);
  --color-label-text:       var(--s-fg);
  --color-secondary:         var(--s-line-strong);
  --color-secondary-dark-1:  #3e444b;
  --color-secondary-dark-2:  #484f58;
  --color-secondary-light-1: var(--s-line-strong);
  --color-secondary-light-2: var(--s-line);
  --color-border:            var(--s-line);
  --color-light-border:      var(--s-line);
  --color-shadow:            rgba(0,0,0,0.5);
  --is-dark-theme: true;
  --fonts-regular:   'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fonts-monospace: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
}
body { font-family: var(--fonts-regular) !important; background-color: var(--s-bg) !important; color: var(--s-fg) !important; }
code, pre, .code-view, tt, kbd, samp, .monaco-editor { font-family: var(--fonts-monospace) !important; }
#navbar, .ui.top.attached.header { background-color: var(--s-bg-elev) !important; border-bottom: 1px solid var(--s-line) !important; box-shadow: none !important; }
#navbar .item, #navbar a { color: var(--s-fg-dim) !important; }
#navbar .item:hover, #navbar a:hover, #navbar .item.active { color: var(--s-fg) !important; }
.ui.segment, .ui.card, .ui.cards > .card { background-color: var(--s-bg-elev) !important; border: 1px solid var(--s-line) !important; box-shadow: none !important; }
.ui.segment.secondary, .ui.secondary.segment { background-color: var(--s-bg-elev-2) !important; }
.ui.attached.segment { border-color: var(--s-line) !important; }
.ui.primary.button, .ui.primary.buttons .button { background-color: var(--s-accent) !important; color: #fff !important; border: none !important; font-weight: 500 !important; }
.ui.primary.button:hover { background-color: var(--s-accent-light) !important; }
.ui.button:not(.primary):not(.red):not(.green):not(.teal):not(.yellow):not(.basic):not(.icon):not(.circular) { background-color: var(--s-bg-elev-2) !important; color: var(--s-fg-dim) !important; border: 1px solid var(--s-line-strong) !important; }
.ui.icon.button, .ui.icon.buttons .button { background-color: var(--s-bg-elev-2) !important; color: var(--s-fg-dim) !important; border: 1px solid var(--s-line-strong) !important; }
.ui.basic.button, .ui.basic.buttons .button { background-color: transparent !important; color: var(--s-fg-dim) !important; border: 1px solid var(--s-line-strong) !important; box-shadow: none !important; }
.ui.input input, .ui.form input:not([type="checkbox"]):not([type="radio"]), .ui.form select, .ui.form textarea, input[type="text"], input[type="password"], input[type="email"], input[type="number"], textarea, select { background-color: var(--s-bg-input) !important; border: 1px solid var(--s-line-strong) !important; color: var(--s-fg) !important; }
.ui.form input:focus, .ui.form textarea:focus { border-color: var(--s-accent) !important; box-shadow: 0 0 0 2px var(--s-accent-20) !important; outline: none !important; }
.ui.menu { background-color: var(--s-bg-elev) !important; border: 1px solid var(--s-line) !important; box-shadow: none !important; }
.ui.menu .item { color: var(--s-fg-dim) !important; }
.ui.menu .item:hover, .ui.menu .item.active { background-color: var(--s-bg-elev-2) !important; color: var(--s-fg) !important; }
.ui.pointing.secondary.menu .active.item { border-color: var(--s-accent) !important; color: var(--s-fg) !important; background-color: transparent !important; }
.ui.table { background-color: var(--s-bg-elev) !important; border: 1px solid var(--s-line) !important; color: var(--s-fg) !important; }
.ui.table thead th { background-color: var(--s-bg-elev-2) !important; border-bottom: 1px solid var(--s-line-strong) !important; color: var(--s-fg-dim) !important; }
.ui.table td { border-top: 1px solid var(--s-line) !important; }
.ui.table tr:hover td { background-color: var(--s-bg-elev-2) !important; }
.ui.label { background-color: var(--s-bg-elev-2) !important; border: 1px solid var(--s-line-strong) !important; color: var(--s-fg-dim) !important; }
.ui.green.label  { background-color: #0d2b1a !important; color: #4ade80 !important; border-color: #14532d !important; }
.ui.red.label    { background-color: #2b0d12 !important; color: #f87171 !important; border-color: #7f1d1d !important; }
.ui.purple.label { background-color: #1e0e3d !important; color: #c084fc !important; border-color: #4c1d95 !important; }
.ui.yellow.label { background-color: #2b2000 !important; color: #fbbf24 !important; border-color: #78350f !important; }
.ui.dropdown .menu, .ui.dropdown .menu .item { background-color: var(--s-bg-elev) !important; border-color: var(--s-line) !important; color: var(--s-fg) !important; }
.ui.dropdown .menu > .item:hover { background-color: var(--s-bg-elev-2) !important; }
.code-view { background-color: var(--s-bg) !important; }
.code-view .lines-num { color: var(--s-fg-muted) !important; background-color: var(--s-bg-elev) !important; border-right: 1px solid var(--s-line) !important; }
.code-diff .del-code { background-color: rgba(220,50,50,0.12) !important; }
.code-diff .add-code { background-color: rgba(50,160,80,0.12) !important; }
pre, .highlight { background-color: var(--s-bg-elev) !important; border: 1px solid var(--s-line) !important; border-radius: 6px; }
a { color: var(--s-accent-light) !important; }
a:hover { color: var(--s-fg) !important; }
.ui.button a, a.ui.button { color: inherit !important; }
#footer { background-color: var(--s-bg-elev) !important; border-top: 1px solid var(--s-line) !important; color: var(--s-fg-muted) !important; }
.ui.divider { border-color: var(--s-line) !important; }
.ui.popup { background-color: var(--s-bg-elev-2) !important; border-color: var(--s-line-strong) !important; color: var(--s-fg) !important; }
.ui.message { background-color: var(--s-bg-elev-2) !important; border-color: var(--s-line) !important; color: var(--s-fg) !important; box-shadow: none !important; }
.ui.info.message    { border-left: 3px solid var(--s-accent) !important; }
.ui.success.message { border-left: 3px solid #22c55e !important; }
.ui.error.message   { border-left: 3px solid #ef4444 !important; }
.ui.warning.message { border-left: 3px solid #f59e0b !important; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--s-bg); }
::-webkit-scrollbar-thumb { background: var(--s-line-strong); border-radius: 3px; }