/* ==========================================================================
   NITRATE — design tokens.  The shared visual language.
   A FILM LAB, not a streaming app.
     dark  = "the vault"       (browse — the default)
     light = "the light table" (inspect)
   Safety orange is the ONLY saturated colour in the interface and always means
   "this is what you sorted by / this needs attention".  Everything else is a
   warm grey scale.
   Owned by the server agent.  Views consume these, never redefine them.
   ========================================================================== */

/* --- LIGHT: "the light table" -------------------------------------------- */
:root {
  --ground:#e6e2d9; --panel:#f2efe8; --panel-2:#dcd7cb; --rule:#c3bcac;
  --ink:#1a1714; --ink-2:#4a443c; --muted:#736c60;
  --accent:#b34d00; --accent-ink:#ffffff; --cool:#256b7a;
  --ok:#3f7a3a; --warn:#8a6412; --crit:#a8382a;
  color-scheme: light;

  /* TYPE — three roles.  Self-hosted only: no CDN, no external request. */
  --font-display: system-ui, ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --size-dense: 12.5px;

  /* hairlines and rhythm */
  --hair: 1px;
  --gap: 12px;
  --pad: 16px;
}

/* --- DARK: "the vault" --------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:#131110; --panel:#1b1817; --panel-2:#252120; --rule:#332e2b;
    --ink:#ece5da; --ink-2:#c3bab0; --muted:#8d857a;
    --accent:#f0790d; --accent-ink:#1a0f04; --cool:#63b6c7;
    --ok:#78b571; --warn:#d8a441; --crit:#d1594a;
    color-scheme: dark;
  }
}

/* the toggle wins in both directions */
:root[data-theme="dark"] {
  --ground:#131110; --panel:#1b1817; --panel-2:#252120; --rule:#332e2b;
  --ink:#ece5da; --ink-2:#c3bab0; --muted:#8d857a;
  --accent:#f0790d; --accent-ink:#1a0f04; --cool:#63b6c7;
  --ok:#78b571; --warn:#d8a441; --crit:#d1594a;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --ground:#e6e2d9; --panel:#f2efe8; --panel-2:#dcd7cb; --rule:#c3bcac;
  --ink:#1a1714; --ink-2:#4a443c; --muted:#736c60;
  --accent:#b34d00; --accent-ink:#ffffff; --cool:#256b7a;
  --ok:#3f7a3a; --warn:#8a6412; --crit:#a8382a;
  color-scheme: light;
}

/* --- base reset ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--size-dense);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.03em;
  line-height: 1.05;
}

p { margin: 0 0 .7em; }
a { color: var(--ink); text-decoration-color: var(--rule); text-underline-offset: 2px; }
a:hover { text-decoration-color: var(--accent); }

img, svg, canvas { max-width: 100%; display: block; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: transparent;
  border: var(--hair) solid var(--rule);
  border-radius: 0;
}
button { cursor: pointer; }

/* ALL numbers, paths, codecs, ids — digits must line up in columns. */
code, kbd, samp, pre, .num, .mono, [data-num] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.num, td.num, th.num { text-align: right; }

table { border-collapse: collapse; width: 100%; }
/* hairline dividers, never zebra stripes */
th, td { border-bottom: var(--hair) solid var(--rule); }

hr { border: 0; border-top: var(--hair) solid var(--rule); margin: 0; }

::selection { background: var(--accent); color: var(--accent-ink); }

/* --- focus ---------------------------------------------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* hover uses outline, never border — a border resizes the box and shifts the grid */
.hoverable:hover { outline: var(--hair) solid var(--rule); }

/* --- severity ------------------------------------------------------------- */
.sev-crit { color: var(--crit); }
.sev-warn { color: var(--warn); }
.sev-info { color: var(--muted); }
.is-ok    { color: var(--ok); }
.accent   { color: var(--accent); }

/* --- scrollbars ----------------------------------------------------------- */
* { scrollbar-color: var(--rule) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--rule); border: 3px solid var(--ground); }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* --- motion --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}