/*
 * Reset, type/spacing/radius scale, and base element styles.
 *
 * The terminal feel comes from the type (JetBrains Mono everywhere except
 * prose), not from any CLI chrome — see
 * design_handoff_ilifu_software_catalog/README.md, "Design Tokens". Sizes,
 * tracking, spacing and radius values below are exactly the ones the handoff
 * lists as "in use"; nothing here is a rounded-off approximation.
 *
 * Desktop only, by decision: the shell below imposes `min-width: 1180px`.
 * No mobile layout has been designed — see CLAUDE.md, "Design decisions
 * that are easy to get wrong". Do not add a narrower breakpoint here.
 */

* {
  box-sizing: border-box;
}

/* ---- Type scale ---------------------------------------------------- */

:root {
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --font-sans: 'IBM Plex Sans', sans-serif;

  /* Every font size the design uses, named after its px value. */
  --fs-9-5: 9.5px;
  --fs-10: 10px;
  --fs-10-5: 10.5px;
  --fs-11: 11px;
  --fs-11-5: 11.5px;
  --fs-12: 12px;
  --fs-12-5: 12.5px;
  --fs-13: 13px;
  --fs-15: 15px;
  --fs-22: 22px;
  --fs-24: 24px;

  /* Letter-spacing (tracking) rules, keyed by where each applies. */
  --tracking-title: -0.02em; /* 22-24px page/package titles */
  --tracking-label: 0.1em; /* 10px uppercase labels */
  --tracking-man-heading: 0.12em; /* man page section headings */

  /* ---- Spacing scale ------------------------------------------------ */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-7: 7px;
  /* NOTE: the handoff README's "Spacing" line lists 2, 4, 6, 7, 9, 11, …
     and omits 8, but the hi-fi design itself uses 8px in three places —
     the wordmark's brand/slash/product gap, the header's user-block
     divider padding, and the solid button's vertical padding. Kept as a
     token rather than three literals so those stay one value. */
  --space-8: 8px;
  --space-9: 9px;
  --space-11: 11px;
  --space-13: 13px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-22: 22px;
  --space-26: 26px;
  --space-30: 30px;

  /* ---- Radius scale -------------------------------------------------- */
  --radius-tiny: 2px; /* tiny tags */
  --radius-sm: 3px; /* chips, inner blocks */
  --radius-md: 4px; /* cards, inputs, code blocks */
  --radius-full: 50%; /* avatar, status dots */

  /* Borders are 1px only, everywhere. There is no shadow token — this
     design has no shadows at all, on purpose. */
  --border-width: 1px;

  /* An outline, not a border, so it can be 2px without contradicting the
     rule above and without shifting layout when it appears. */
  --focus-ring-width: 2px;
}

/* ---- Base element styles -------------------------------------------- */

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  color: var(--fg);
  text-decoration: underline;
}

::selection {
  background: var(--accent2);
}

/* ---- App shell -------------------------------------------------------
 * The one wrapper every screen renders inside. Desktop-only: no narrower
 * layout exists below 1180px, by decision, so this intentionally has no
 * media query making it collapse. */

.app-shell {
  min-height: 100vh;
  min-width: 1180px;
  background: var(--bg);
  color: var(--fg);
  font-size: var(--fs-13);
}

/* ---- Shared typography primitives ------------------------------------
 * Reused across every screen: uppercase field/section labels, page/package
 * titles, and man-page section headings. */

.u-label {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  letter-spacing: var(--tracking-label);
  color: var(--dim);
  text-transform: uppercase;
}

.u-title {
  font-family: var(--font-mono);
  font-size: var(--fs-22);
  font-weight: 700;
  letter-spacing: var(--tracking-title);
}

.u-man-heading {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: var(--tracking-man-heading);
  color: var(--accent);
  text-transform: uppercase;
}

.u-prose {
  font-family: var(--font-sans);
}

/* ---- Buttons -----------------------------------------------------------
 * One shared primitive, and the only one: every button-shaped control in the
 * app is `.btn` plus a variant, plus at most a screen-level size modifier
 * (`.admin-btn`, `.request-submit`). A screen that wants a differently
 * proportioned button adds a modifier here or beside its own component — it
 * does not restate `background`/`border`/`font`, which is how two buttons
 * end up a pixel apart for no reason.
 *
 * Text-only controls (`edit`, `remove`, `copy`) are deliberately not
 * buttons in this sense: the design draws them as plain inline text, so they
 * reset the UA button chrome instead of taking `.btn`. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--fs-11-5);
  font-weight: 500;
  border-radius: var(--radius-md);
  border: var(--border-width) solid transparent;
  padding: var(--space-8) var(--space-13);
  cursor: pointer;
}

.btn--solid {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

.btn--outline-accent {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}

.btn--outline-neutral {
  background: transparent;
  color: var(--fg2);
  border-color: var(--line2);
}

/* "buttons and rows lift to `--panel2`/`--sel`" (handoff README,
   "Interactions & Behavior"). Only the two transparent variants: a solid
   accent button replacing its fill with `--panel2` would read as disabled,
   not as hovered, so it keeps its accent. */
.btn--outline-accent:hover,
.btn--outline-neutral:hover {
  background: var(--panel2);
}

/* ---- Keyboard focus -------------------------------------------------- */

/* Several component rules set `outline: 0` on the element itself rather than
   on `:focus` — `.admin-input`, `.admin-select`, the catalog search field and
   the categorise select, the request form's inputs. That removes the
   browser's focus ring for keyboard users as well as pointer users, leaving
   no way to tell where you are while tabbing.

   `:focus-visible` fires only when the browser judges focus to warrant an
   indicator — keyboard, not a click — so this restores the ring without
   drawing a box around every clicked input, which is what those rules were
   suppressing in the first place.

   Spelled out per element rather than with `:where()` so the specificity
   (0,1,1) beats the single-class rules that set `outline: 0`; inside
   `:where()` it would tie with them and lose to whichever loaded last. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: var(--focus-ring-width) solid var(--accent);
  outline-offset: 2px;
}