/* The Retador Archive — a parchment-and-ink theme layered on top of
   Pico.css. Overrides Pico's CSS custom properties rather than fighting
   its layout, so form controls / buttons / grids keep working exactly
   as before, just re-skinned. Fonts are vendored locally (no CDN), same
   policy as pico.min.css / htmx.min.js. */

@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/cinzel-700.e7ed1ab78a17.woff2") format("woff2");
}

@font-face {
  font-family: "IM Fell English";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/im-fell-english-400.72415626cdb5.woff2") format("woff2");
}

:root {
  --pico-font-family: "IM Fell English", Georgia, "Iowan Old Style", serif;

  --ink: #2b1d14;
  --parchment: #f2e6c9;
  --parchment-dark: #e6d6a8;
  --parchment-card: #f8efd8;
  --leather: #3b2417;
  --leather-dark: #2a1810;
  --oxblood: #7a2723;
  --oxblood-dark: #5c1c19;
  --gold: #a3782f;
  --gold-light: #c9a44c;
  --moss: #4c6b3d;

  --pico-primary: var(--oxblood);
  --pico-primary-background: var(--oxblood);
  --pico-primary-hover: var(--oxblood-dark);
  --pico-primary-inverse: var(--parchment-card);
  --pico-primary-underline: var(--gold);
  --pico-primary-focus: rgba(163, 120, 47, 0.35);

  --pico-color: var(--ink);
  --pico-background-color: var(--parchment);
  --pico-card-background-color: var(--parchment-card);
  --pico-card-border-color: var(--gold);
  --pico-card-sectioning-background-color: var(--parchment-dark);
  --pico-muted-color: #6b5a42;
  --pico-muted-border-color: var(--gold-light);
  --pico-h1-color: var(--ink);
  --pico-h2-color: var(--ink);
  --pico-h3-color: var(--ink);

  --pico-form-element-background-color: #fbf6e6;
  --pico-form-element-border-color: var(--gold);
  --pico-form-element-focus-color: var(--oxblood);
}

html {
  background-color: var(--parchment);
  min-height: 100%;
}

body {
  min-height: 100vh;
  background-color: var(--parchment);
  background-image:
    radial-gradient(ellipse at top left, rgba(163, 120, 47, 0.10), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(122, 39, 35, 0.08), transparent 55%);
  background-attachment: fixed;
}

h1, h2, h3, h4, hgroup h1, nav strong {
  font-family: "Cinzel", serif;
  letter-spacing: 0.02em;
  color: var(--ink);
}

header > nav {
  background: var(--leather);
  background-image: linear-gradient(180deg, var(--leather) 0%, var(--leather-dark) 100%);
  color: var(--parchment);
  padding: 0.85rem 1.25rem;
  border-radius: var(--pico-border-radius);
  border: 1px solid #1c0f08;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  margin-top: 1rem;
}

header > nav a,
header > nav strong {
  color: var(--parchment);
}

header > nav strong::before {
  content: "⁘ ";
  color: var(--gold-light);
}

header > nav a:hover {
  color: var(--gold-light);
}

header > nav input[type="search"] {
  background: #fbf6e6;
  color: var(--ink);
}

.tag-pill {
  background: var(--parchment-card);
  color: var(--oxblood-dark);
  border: 1px solid var(--gold);
  font-family: "Cinzel", serif;
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.tag-pill:hover {
  background: var(--gold-light);
  color: var(--leather-dark);
}

.doc-card {
  background: var(--parchment-card);
  border: 1px solid var(--gold);
  box-shadow: 0 1px 3px rgba(43, 29, 20, 0.15);
}

.doc-card h4 a {
  color: var(--oxblood-dark);
}

.status-badge {
  font-family: "Cinzel", serif;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}

.status-ready { background: #e2ead9; color: var(--moss); border-color: var(--moss); }
.status-processing, .status-pending_upload { background: #f5e6c4; color: #8a6416; border-color: var(--gold); }
.status-extraction_failed { background: #f2dcd9; color: var(--oxblood-dark); border-color: var(--oxblood); }

mark {
  background: var(--gold-light);
  color: var(--leather-dark);
}

article[role="alert"] {
  background: var(--parchment-card);
  border: 1px solid var(--oxblood);
  border-left-width: 4px;
}

button, [type="submit"], [role="button"] {
  font-family: "Cinzel", serif;
  letter-spacing: 0.02em;
}