/* GaloreX Library — shared look (galorex.ai: warm black, ivory, small gold accents) */
@font-face { font-family: 'Inter'; src: url('/fonts/inter.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Inter Tight'; src: url('/fonts/inter-tight.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Plex Mono'; src: url('/fonts/plex-mono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Plex Mono'; src: url('/fonts/plex-mono-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
  --bg: #0a0a09; --bg-2: #111110; --surface: #161614; --surface-2: #1d1c1a; --surface-3: #262522;
  --line: rgba(244, 243, 238, .08); --line-2: rgba(244, 243, 238, .14);
  --ink: #f4f3ee; --ink-2: #c9c7bf; --muted: #8b8980; --faint: #5d5b55;
  --gold: #d6ad5c; --gold-2: #e9d9b0;
  --metal: linear-gradient(135deg, #f5dc9a 0%, #d4a24a 45%, #a8792b 75%, #e8c77a 100%);
  /* label colours (same meaning everywhere: cards, timelines, charts) */
  --c-subtask: #8fb08a; --c-failure: #e0644f; --c-intervention: #e9a23b; --c-correction: #5fb59a; --c-recovery: #a98bb5; --c-source: #9c9a92;
  --sans: 'Inter', system-ui, -apple-system, sans-serif; --display: 'Inter Tight', var(--sans); --mono: 'Plex Mono', ui-monospace, Menlo, monospace;
  --r: 12px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--display); letter-spacing: -.02em; margin: 0; font-weight: 650; }
code, pre, .mono { font-family: var(--mono); }
::selection { background: rgba(214, 173, 92, .35); }

.btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line-2);
  background: var(--surface-2); color: var(--ink); font-weight: 550; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, transform .15s; }
.btn:hover { background: var(--surface-3); border-color: rgba(244, 243, 238, .24); }
.btn.primary { background: var(--ink); color: #0a0a09; border-color: var(--ink); }
.btn.primary:hover { background: #fff; }
.btn.metal { background: var(--metal); color: #1a1408; border: none; }
.btn.metal:hover { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(214, 173, 92, .28); }
.btn.ghost { background: transparent; }
.btn.sm { height: 30px; padding: 0 11px; font-size: 13px; border-radius: 8px; }
.btn.xs { height: 24px; padding: 0 8px; font-size: 12px; border-radius: 6px; }
.btn:disabled { opacity: .45; cursor: default; }
.inp { height: 38px; width: 100%; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--ink); font: inherit; outline: none; }
.inp:focus { border-color: rgba(214, 173, 92, .6); box-shadow: 0 0 0 3px rgba(214, 173, 92, .12); }
textarea.inp { height: auto; padding: 10px 12px; resize: vertical; }
select.inp { padding-right: 28px; }
.muted { color: var(--muted); } .small { font-size: 12.5px; } .faint { color: var(--faint); }
.pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 550;
  border: 1px solid var(--line-2); color: var(--ink-2); background: rgba(244, 243, 238, .03); white-space: nowrap; }
.pill.gold { color: var(--gold-2); border-color: rgba(214, 173, 92, .4); background: rgba(214, 173, 92, .08); }
.pill.red { color: #f2a092; border-color: rgba(224, 100, 79, .45); background: rgba(224, 100, 79, .08); }
.pill.amber { color: #f3c47e; border-color: rgba(233, 162, 59, .45); background: rgba(233, 162, 59, .08); }
.pill.green { color: #9fd6c3; border-color: rgba(95, 181, 154, .45); background: rgba(95, 181, 154, .08); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: -.02em; }
.logo img { height: 22px; }
.logo .lib { color: var(--gold-2); font-weight: 500; }
kbd { font-family: var(--mono); font-size: 11px; padding: 1px 5px; border-radius: 4px; border: 1px solid var(--line-2); background: var(--surface-2); }
.code { position: relative; background: #0d0d0c; border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; font: 12.5px/1.65 var(--mono); color: #dedcd3; overflow-x: auto; white-space: pre; }
.code .k { color: #e9a23b; } .code .s { color: #9fd6c3; } .code .c { color: var(--faint); } .code .f { color: var(--gold-2); }
.copy { position: absolute; top: 8px; right: 8px; }