/* FM RPG brand look (Carbon / Bone / Orange / Warm Grey). Loaded after style.css. */
:root {
  --brand-carbon: #17191D;
  --brand-bone: #F2EEE6;
  --brand-orange: #D96832;
  --brand-grey: #AAA49B;
  --brand-moss: #66735C;
  /* Carbon-derived surfaces */
  --surface-1: #1E2126;
  --surface-2: #262A30;
  --line: rgba(170, 164, 155, .35);
}
body { background: var(--brand-carbon); color: var(--brand-bone); }
a { color: var(--brand-orange); }
a:hover { color: var(--brand-bone); }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, .lockBtn:focus-visible { outline: 2px solid var(--brand-orange); outline-offset: 2px; }

/* Header: the PNG background is Carbon, so header and logo area are exactly Carbon with no framing */
header.site, footer.site { background: var(--brand-carbon); }
header.site { border-bottom: 1px solid var(--line); }
.bar { padding-top: .25rem; padding-bottom: .25rem; }
.brand { display: block; line-height: 0; background: var(--brand-carbon); }
.brand img { display: block; height: auto; width: clamp(130px, 22vw, 200px); background: var(--brand-carbon); border: 0; border-radius: 0; box-shadow: none; }
header nav a, .brand { text-decoration: none; }
header nav a { color: var(--brand-bone); padding-bottom: 2px; }
header nav a:hover { color: var(--brand-orange); }
header nav a[aria-current] { color: var(--brand-bone); border-bottom: 2px solid var(--brand-orange); }
.support-link { color: var(--brand-grey); }
.support-link:hover { color: var(--brand-orange); }

.muted, .status, dt, .hint { color: var(--brand-grey); }
.status.error { color: #ff8a73; }
.status.ok { color: var(--brand-bone); }
.hero h1 { color: var(--brand-bone); border-left: 4px solid var(--brand-orange); padding-left: .6rem; }
.lead { color: var(--brand-bone); }

.card { background: var(--surface-1); border: 1px solid var(--line); }
label { color: var(--brand-grey); }
select, input[type=text], input[type=number] { background: var(--brand-carbon); color: var(--brand-bone); border: 1px solid var(--line); }
select:hover { border-color: var(--brand-grey); }

/* Secondary controls */
button { background: var(--surface-2); color: var(--brand-bone); border: 1px solid var(--line); }
button:hover:not(:disabled) { border-color: var(--brand-orange); color: var(--brand-orange); }
button:disabled { background: var(--surface-1); color: var(--brand-grey); opacity: .55; }
/* Generate stays the strongest action */
#generate { background: var(--brand-orange); color: var(--brand-carbon); border-color: var(--brand-orange); font-weight: 700; }
#generate:hover:not(:disabled) { background: var(--brand-bone); border-color: var(--brand-bone); color: var(--brand-carbon); }
#generate:disabled { background: var(--surface-2); color: var(--brand-grey); border-color: var(--line); }

/* Locks: styling only */
.lockBtn { background: transparent; border: 1px solid transparent; color: var(--brand-grey); opacity: .85; }
.lockBtn:hover:not(:disabled), .lockBtn:focus-visible { background: var(--surface-2); border-color: var(--brand-grey); color: var(--brand-bone); }
.lockBtn[aria-pressed="true"], .lockBtn[aria-pressed="true"]:hover:not(:disabled), .lockBtn[aria-pressed="true"]:focus-visible { background: var(--brand-orange); color: var(--brand-carbon); border-color: var(--brand-orange); opacity: 1; }

/* Profile */
#pName { color: var(--brand-bone); border-bottom: 2px solid var(--brand-orange); display: inline-block; padding-bottom: .15rem; }
dd.value { color: var(--brand-bone); }
.tag { border-color: var(--line); color: var(--brand-grey); }
#bioBox h3, #pBio { color: var(--brand-bone); }
#bioBox { border-top: 1px solid var(--line); }
.dev { border-color: var(--brand-moss); }

/* Support / Ko-fi */
.support h2 { color: var(--brand-bone); }
a.btn { background: transparent; color: var(--brand-orange); border: 1px solid var(--brand-orange); }
a.btn:hover { background: var(--brand-orange); color: var(--brand-carbon); }

/* Footer */
footer.site { border-top: 1px solid var(--brand-orange); color: var(--brand-grey); }
footer.site a { color: var(--brand-bone); }
footer.site a:hover { color: var(--brand-orange); }
.skip:focus { background: var(--brand-orange); color: var(--brand-carbon); }

/* Public page: hide non-error load status; info sections */
#loadStatus:not(.error) { display: none; }
.info h3, .prose h3 { margin-top: 1rem; }
.info ul, .prose ul { margin: .4rem 0 .4rem 1.2rem; }