/* ChronoVox design tokens, fonts and base type (docs/plans/2026-10-21-chronovox-redesign-design.md).
   Loaded after upload.css on restyled pages: it replaces upload.css's cream and orange values by
   re-declaring the variables that file uses. The fonts are self-hosted OFL files in /static/fonts. */

@font-face { font-family: "Saira Semi Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url("/static/fonts/SairaSemiCondensed-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Saira Semi Condensed"; font-weight: 700; font-style: normal; font-display: swap; src: url("/static/fonts/SairaSemiCondensed-Bold.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-style: normal; font-display: swap; src: url("/static/fonts/AtkinsonHyperlegible-Regular.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-style: normal; font-display: swap; src: url("/static/fonts/AtkinsonHyperlegible-Bold.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Mono"; font-weight: 200 800; font-style: normal; font-display: swap; src: url("/static/fonts/AtkinsonHyperlegibleMono-Variable.woff2") format("woff2"); }

:root {
  --band-top: #445870;     /* the logo's own background, top of Spencer's file */
  --band-bottom: #242c3f;  /* ...and bottom */
  --logo-top: #35465b;     /* mean colour of the header strip's top and bottom rows: */
  --logo-bottom: #2c3d4f;  /* scripts/make-icons.py prints them; the band gradient uses these so the strip blends in */
  --ink: #242c3f;          /* 13.9:1 on white, 12.9:1 on --surface */
  --surface: #f4f6f8;
  --card: #ffffff;
  --line: #d5dee5;
  --muted: #566273;        /* 6.2:1 on white, 5.7:1 on --surface */
  --glint: #3aa9f1;        /* markers and focus rings only; 2.6:1 on white, never text */
  --link: #0b66a8;         /* 6.0:1 on white, 5.6:1 on --surface */
  --danger: #b3261e;       /* 6.5:1 on white, 6.0:1 on --surface */

  /* upload.css's names, pointed at the new palette */
  --bg: var(--surface);
  --accent: var(--ink);
  --accent-ink: #ffffff;

  --font-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: "Saira Semi Condensed", "Atkinson Hyperlegible", system-ui, sans-serif;
  --font-time: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

body { font-family: var(--font-body); }
h1, h2, h3 { font-family: var(--font-head); font-weight: 700; letter-spacing: 0.005em; }
h1 { font-size: 2rem; }
a { color: var(--link); }
.error, .error-summary, .field.has-error input { color: var(--danger); }
.field.has-error input { border-color: var(--danger); }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
  box-shadow: 0 0 0 5px var(--glint);
}

/* The slate band: Spencer's wordmark strip (web/public/icons/brand-header*.png, cropped and resized by
   scripts/make-icons.py) on the colours sampled from the strip's own edges, so it has no visible box. */
.band-logo { background: linear-gradient(to bottom, var(--logo-top), var(--logo-bottom)); }
.band-logo a { display: block; width: fit-content; margin: 0 auto; line-height: 0; }
.band-logo img { display: block; width: 240px; height: 56px; max-width: 100%; }
.band-bar { background: var(--logo-bottom); color: #fff; border-bottom: 1px solid var(--band-bottom); }
.band-bar .inner { max-width: 64rem; margin: 0 auto; padding: 0.35rem 1rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.1rem 1rem; }
.band-bar form { margin: 0; }
.band-bar select { font: inherit; padding: 0.4rem 0.6rem; border: 1px solid var(--line); border-radius: 0.5rem; background: #fff; color: var(--ink); max-width: 14rem; }
.band-bar .who { color: #dbe3ea; font-size: 0.9rem; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.band-bar button { background: none; border: 0; padding: 0.55rem 0; min-height: 2.75rem; color: #fff; font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; }
.band-bar :focus-visible { outline-color: #fff; }
.band-logo.short img { height: 44px; width: auto; }