/* Razed Phoenix — shared tokens and UI primitives
   Palette per the cover brief: iron black, soot, worn steel, one register of warm lamplight.
   No fire, no embers, no birds. */
/* Fonts are self-hosted (SIL Open Font License, see /assets/fonts) so readers' browsers never call a third party. */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Literata"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/literata-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Literata"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/literata-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Literata"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/literata-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/inter-latin-600-normal.woff2") format("woff2"); }

:root {
  --iron-950: #0e0f10;   /* soot */
  --iron-900: #151618;
  --iron-850: #1b1c1f;
  --iron-800: #25272a;
  --iron-700: #373a3e;
  --iron-500: #7b7e83;   /* worn steel */
  --iron-300: #b4b5b7;
  --iron-100: #e7e4de;   /* bright flat */
  --lamp-600: #8a6838;   /* the one warm light */
  --lamp-500: #ab8750;
  --lamp-400: #c7a473;
  --brass-400: #d3be99;
  --brass-300: #e2d4bb;
  --danger: #f87171;
  --ok: #86efac;

  --font-display: "Cormorant Garamond", Garamond, Georgia, serif;
  --font-read: "Literata", Georgia, "Times New Roman", serif;
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius: 10px;
  --shadow: 0 10px 40px -10px rgb(0 0 0 / .6);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--iron-950);
  color: var(--iron-100);
  font: 15px/1.55 var(--font-ui);
}
img { max-width: 100%; }
[hidden] { display: none !important; }
a { color: var(--brass-400); }
a:hover { color: var(--brass-300); }
:focus-visible { outline: 2px solid var(--brass-400); outline-offset: 2px; border-radius: 4px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  min-height: 40px; padding: 0 16px;
  border-radius: 8px; border: 1px solid var(--iron-700);
  background: var(--iron-850); color: var(--iron-100);
  font: 500 14px/1 var(--font-ui); text-decoration: none; cursor: pointer;
  transition: background .15s, border-color .15s, transform .05s;
}
.btn:hover { background: var(--iron-800); border-color: var(--iron-500); color: var(--iron-100); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary {
  background: var(--lamp-400); border-color: var(--lamp-400); color: #17130e;
}
.btn-primary:hover { background: var(--brass-400); border-color: var(--brass-400); color: #17130e; }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: rgb(255 255 255 / .06); border-color: transparent; }
.btn-danger { color: var(--danger); }
.btn-sm { min-height: 32px; padding: 0 10px; font-size: 13px; }

.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 13px; font-weight: 500; color: var(--iron-300); }
.input, textarea.input, select.input {
  width: 100%; min-height: 42px; padding: 9px 12px;
  border-radius: 8px; border: 1px solid var(--iron-700);
  background: var(--iron-900); color: var(--iron-100);
  font: 15px/1.4 var(--font-ui);
}
.input:focus { outline: none; border-color: var(--brass-400); box-shadow: 0 0 0 3px rgb(199 164 115 / .18); }

.alert { padding: 10px 12px; border-radius: 8px; font-size: 14px; margin-bottom: 14px; }
.alert-error { background: rgb(248 113 113 / .1); border: 1px solid rgb(248 113 113 / .35); color: #fecaca; }
.alert-ok { background: rgb(134 239 172 / .08); border: 1px solid rgb(134 239 172 / .3); color: #bbf7d0; }

.brand {
  font-family: var(--font-display); font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--iron-100); text-decoration: none;
}
.brand span { color: inherit; }

.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%); z-index: 100;
  background: var(--iron-800); border: 1px solid var(--iron-700); color: var(--iron-100);
  padding: 10px 16px; border-radius: 999px; box-shadow: var(--shadow); font-size: 14px;
}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }