/* That 70s Roleplay — Gitea theme.
   Gitea themes are just CSS-variable overrides, so this rebinds Gitea's own
   tokens to the approved leather palette rather than fighting its stylesheet.
   Palette matches the dashboard, 70s_lib and the in-game NUI. */
@import url("https://fonts.googleapis.com/css2?family=Bowlby+One&family=Inter:wght@400;600;700;800&display=swap");

that70s, :root[data-theme="that70s"] {
  --is-dark-theme: true;

  --color-primary:              #D97D2E;
  --color-primary-contrast:     #2a1b0d;
  --color-primary-dark-1:       #e08c45;
  --color-primary-dark-2:       #e69a5c;
  --color-primary-dark-3:       #eca973;
  --color-primary-dark-4:       #f2b88a;
  --color-primary-dark-5:       #f8c7a1;
  --color-primary-dark-6:       #fdd6b8;
  --color-primary-dark-7:       #fee5cf;
  --color-primary-light-1:      #c36f26;
  --color-primary-light-2:      #ad621e;
  --color-primary-light-3:      #975416;
  --color-primary-light-4:      #81470e;
  --color-primary-light-5:      #6b3a06;
  --color-primary-light-6:      #552d00;
  --color-primary-light-7:      #3f2000;
  --color-primary-alpha-10:     #D97D2E19;
  --color-primary-alpha-20:     #D97D2E33;
  --color-primary-alpha-30:     #D97D2E4b;
  --color-primary-alpha-40:     #D97D2E66;
  --color-primary-alpha-50:     #D97D2E80;
  --color-primary-alpha-60:     #D97D2E99;
  --color-primary-alpha-70:     #D97D2Eb3;
  --color-primary-alpha-80:     #D97D2Ecc;
  --color-primary-alpha-90:     #D97D2Ee1;
  --color-primary-hover:        #e08c45;
  --color-primary-active:       #c36f26;

  --color-secondary:            #8A6A3C;
  --color-secondary-dark-1:     #9a7844;
  --color-secondary-dark-2:     #aa864c;
  --color-secondary-dark-3:     #ba9454;
  --color-secondary-dark-4:     #c9a46a;
  --color-secondary-light-1:    #7a5c34;
  --color-secondary-light-2:    #6a4e2c;
  --color-secondary-alpha-10:   #8A6A3C19;
  --color-secondary-alpha-30:   #8A6A3C4b;
  --color-secondary-alpha-50:   #8A6A3C80;
  --color-secondary-alpha-70:   #8A6A3Cb3;
  --color-secondary-alpha-90:   #8A6A3Ce1;
  --color-secondary-button:     #3a2818;
  --color-secondary-hover:      #4a3320;
  --color-secondary-active:     #2e2216;

  /* surfaces */
  --color-body:                 #1b120a;
  --color-box-body:             #241A10;
  --color-box-body-highlight:   #2E2216;
  --color-box-header:           #2E2216;
  --color-navbar:               #2E2216;
  --color-nav-bg:               #2E2216;
  --color-nav-hover-bg:         #3a2818;
  --color-header-wrapper:       #241A10;
  --color-footer:               #241A10;
  --color-menu:                 #2E2216;
  --color-card:                 #2E2216;
  --color-markup-code-block:    #150e07;
  --color-markup-code-inline:   #150e07;
  --color-input-background:     #150e07;
  --color-input-border:         #3d2c1a;
  --color-input-border-hover:   #8A6A3C;
  --color-input-text:           #F4E8CF;
  --color-light:                #2E2216;
  --color-light-mimic-enabled:  #2E2216;
  --color-light-border:         #3d2c1a;
  --color-hover:                #ffffff14;
  --color-active:               #ffffff22;
  --color-menu-hover:           #3a2818;
  --color-shadow:               #00000066;
  --color-secondary-bg:         #2E2216;
  --color-expand-button:        #3a2818;
  --color-placeholder-text:     #9c8a6a;
  --color-editor-line-highlight:#2E2216;
  --color-project-column-bg:    #2E2216;
  --color-caret:                #F4E8CF;
  --color-reaction-bg:          #ffffff12;
  --color-reaction-hover-bg:    #D97D2E33;
  --color-tooltip-text:         #F4E8CF;
  --color-tooltip-bg:           #150e07;
  --color-overlay-backdrop:     #000000b0;

  /* text */
  --color-text:                 #F4E8CF;
  --color-text-dark:            #ffffff;
  --color-text-light:           #e0d2b4;
  --color-text-light-1:         #C9B48F;
  --color-text-light-2:         #b5a07c;
  --color-text-light-3:         #9c8a6a;
  --color-text-muted:           #C9B48F;
  --color-nav-text:             #F4E8CF;

  --color-border:               #3d2c1a;

  /* semantics stay readable on leather */
  --color-green:                #6FA860;
  --color-red:                  #C4553B;
  --color-yellow:               #D9A62E;
  --color-orange:               #D97D2E;
  --color-gold:                 #C9A46A;
  --color-blue:                 #7aa7c7;
  --color-success-bg:           #26351f;
  --color-success-text:         #A8D69A;
  --color-success-border:       #6FA860;
  --color-error-bg:             #3a1f18;
  --color-error-text:           #E9A08E;
  --color-error-border:         #C4553B;
  --color-warning-bg:           #3a3016;
  --color-warning-text:         #EBCF8A;
  --color-warning-border:       #D9A62E;
  --color-info-bg:              #2b2216;
  --color-info-text:            #E6CFA0;
  --color-info-border:          #8A6A3C;

  --color-diff-added-row-bg:    #1f2b1a;
  --color-diff-removed-row-bg:  #33201a;

  color-scheme: dark;
}

/* ---- the bits that make it read as That 70s rather than "a dark Gitea" ---- */

body { font-family: Inter, system-ui, sans-serif; }

/* leather navbar with the stitch line */
.page-content, body { background: var(--color-body); }
#navbar, .ui.secondary.menu#navbar {
  background:
    repeating-linear-gradient(115deg, rgba(0,0,0,.06) 0 2px, transparent 2px 7px),
    linear-gradient(160deg,#b98f5b 0%,#a67a48 45%,#8e6538 100%) !important;
  border-bottom: 3px solid #3d2914;
  position: relative;
}
#navbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 0;
  border-bottom: 2px dashed #F0D9A8; opacity: .55; pointer-events: none;
}
#navbar a, #navbar .item, #navbar .brand { color: #2a1b0d !important; font-weight: 700; }
#navbar a:hover, #navbar .item:hover { color: #150e07 !important; }

h1, h2, h3, .ui.header { font-family: "Bowlby One", Impact, fantasy; letter-spacing: .3px; }

/* the sign-in card reads like the menu header */
.page-content.user.signin .ui.container > .ui.grid,
.user.signin .ui.form,
.user.activate .ui.form,
.user.forgot.password .ui.form {
  background: var(--color-box-body);
  border: 1px solid var(--color-secondary);
  border-radius: 12px;
  padding: 26px 26px 30px;
  box-shadow: 0 18px 50px #00000080;
}
.user.signin h4.ui.top.attached.header {
  font-family: "Bowlby One", Impact, fantasy;
  background:
    repeating-linear-gradient(115deg, rgba(0,0,0,.06) 0 2px, transparent 2px 7px),
    linear-gradient(160deg,#b98f5b 0%,#a67a48 45%,#8e6538 100%);
  color: #2a1b0d;
  border: 1px solid #8e6538;
  border-radius: 10px 10px 0 0;
  letter-spacing: .5px;
}
.ui.primary.button, .ui.primary.buttons .button {
  background: linear-gradient(180deg,#d0a874,#ab8049);
  color: #2a1b0d; font-weight: 800; border: 1px solid #6d5026;
  box-shadow: 0 3px 0 #63481f, inset 0 1px 0 rgba(255,240,215,.5);
}
.ui.primary.button:hover { background: linear-gradient(180deg,#dcb684,#b98f5b); color:#2a1b0d; }
.ui.primary.button:active { transform: translateY(3px); box-shadow: 0 0 0 #63481f; }

/* Secondary buttons must NOT pick up the leather gradient — the passkey button
   rendered as orange text on tan and was unreadable. */
.ui.basic.button, .ui.basic.buttons .button,
.ui.button:not(.primary):not(.red):not(.green):not(.orange):not(.yellow) {
  background: #3a2818;
  color: var(--color-text) !important;
  border: 1px solid var(--color-secondary);
  font-family: Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  text-shadow: none;
}
.ui.basic.button:hover,
.ui.button:not(.primary):not(.red):not(.green):not(.orange):not(.yellow):hover {
  background: #4a3320; color: var(--color-text-dark) !important;
}
/* the display face belongs on page headings, not on every control */
.ui.button, input, textarea, select { font-family: Inter, system-ui, sans-serif; }

/* the brand mark is a wide wordmark, so give it room */
#navbar .brand img, .logo { height: 30px; width: auto; }

/* The passkey link is an <a class="signin-passkey">, not a .ui.button, so the
   button rules above never reached it and it rendered as display-face orange
   text on leather. Style it explicitly as a secondary control. */
a.signin-passkey, .signin-passkey {
  display: block;
  background: #3a2818 !important;
  background-image: none !important;
  color: var(--color-text) !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-weight: 700;
  letter-spacing: 0;
  text-shadow: none;
  border: 1px solid var(--color-secondary);
  border-radius: 8px;
  padding: 12px 18px;
  text-align: center;
}
a.signin-passkey:hover, .signin-passkey:hover {
  background: #4a3320 !important;
  color: var(--color-text-dark) !important;
}

/* the panel below the form is a plain segment, not a header */
.user.signin .ui.attached.segment,
.user.signin .inline-grid + .ui.attached.segment {
  background: var(--color-box-body) !important;
  background-image: none !important;
  border: 1px solid var(--color-secondary);
  border-radius: 0 0 10px 10px;
}