/* ===========================================================================
 * PRIVILEGE — canonical token layer for root.rent UI apps.
 * Spec: docs/design-system.md
 *
 * This is the SOURCE OF TRUTH for the tokens. Consumers:
 *   - home.root.rent/hosts  — inlined at generate time by tools/host_dash.py
 *   - home.root.rent        — homepage's custom.css carries its own copy, because
 *                           homepage loads exactly one stylesheet and has no import
 *                           step. Keep the :root block there in sync with this file.
 *
 * Contains no app-specific rules on purpose — only tokens and primitives that any
 * root.rent page can adopt.
 * =========================================================================== */
:root {
  /* Ground — warm near-blacks, so brass sits naturally. Never pure #000 except redaction. */
  --pv-ground:    #0B0B0C;
  --pv-panel:     #121214;
  --pv-raised:    #18181B;
  --pv-rule:      #26262B;
  --pv-rule-hi:   #3A3A42;

  /* Ink — warm bone, not white. */
  --pv-ink:       #E6E1D7;
  --pv-ink-dim:   #9C968A;
  --pv-ink-faint: #5E5A52;   /* ~3:1 — decorative/disabled only, never load-bearing */

  /* Brass — letterhead foil, not gold leaf. */
  --pv-brass:     #C2A15C;
  --pv-brass-hi:  #E0C07A;
  --pv-brass-dim: #7A663A;

  /* Status — always paired with a text code so colour is never the sole signal. */
  --pv-ok:        #6E9275;
  --pv-warn:      #BE7B33;
  --pv-bad:       #9B3A33;

  --pv-serif: Spectral, 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  --pv-mono:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --pv-radius: 2px;
  --pv-tick:   120ms;
  --pv-ease:   cubic-bezier(0.2, 0, 0.3, 1);
}

/* ---- primitives ---------------------------------------------------------- */

.pv-body {
  margin: 0;
  background: var(--pv-ground);
  color: var(--pv-ink);
  font-family: var(--pv-mono);
  font-variant-numeric: tabular-nums;   /* columns of figures must align */
  -webkit-font-smoothing: antialiased;
}

/* Grain, barely. If you can see it, it's too strong. */
.pv-grain::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(230, 225, 215, 0.012) 0px,
    rgba(230, 225, 215, 0.012) 1px,
    transparent 1px,
    transparent 4px);
}

/* The classification strip — the one wink in a straight-faced interface. */
.pv-classification {
  padding: 7px 16px 6px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pv-brass-dim);
  border-bottom: 1px solid var(--pv-rule);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The serif gets exactly one moment per page. */
.pv-masthead {
  margin: 0 0 6px;
  font-family: var(--pv-serif);
  font-weight: 300;
  font-size: 2.25rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--pv-ink);
}

/* § 01 … lifted from financial-statement schedules. */
.pv-section {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pv-ink-dim);
}
.pv-section .pv-sec-no { color: var(--pv-brass); letter-spacing: 0.1em; }
.pv-section::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--pv-rule); }

/* The stamp, never the dot: a square plus a code, so colour is never alone. */
.pv-stamp { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pv-stamp::before {
  content: "";
  width: 6px; height: 6px;
  background: currentColor;
  border-radius: 0;
  flex: 0 0 6px;
}
.pv-ok   { color: var(--pv-ok); }
.pv-warn { color: var(--pv-warn); }
.pv-bad  { color: var(--pv-bad); }

/* Hairlines, not shadows. */
.pv-rule { border: 0; border-top: 1px solid var(--pv-rule); margin: 0; }

.pv-label {
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pv-ink-faint);
}

a.pv-link { color: var(--pv-ink); text-decoration: none; border-bottom: 1px solid transparent; }
a.pv-link:hover { color: var(--pv-brass-hi); border-bottom-color: var(--pv-brass-dim); }

:focus-visible { outline: 1px solid var(--pv-brass) !important; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}