/* ===========================================================================
   The console palette
   ---------------------------------------------------------------------------
   Hung off the document root rather than the shell, but only on a page that has
   one. Toasts, confirm dialogs and context menus are appended to body, outside
   .app entirely, so scoping to the shell dressed the page and left every
   overlay in the old neutral. Everything the dashboard opens is covered here.

   The homepage, share pages and login have no .app, so they keep the palette a
   stranger already knows.

   Two passes got this wrong before landing here. The first was polish: a lift,
   a stagger, a drift. It made a table smoother and left it a table. The second
   overcorrected into big soft radial bloom and a bright blue, which is the look
   every generated interface reaches for and is not what that era looked like at
   all. Those machines drew flat panels with hard edges. Depth came from things
   sitting on top of other things, never from a glow.

   So: no gradients anywhere, no coloured shadows, nothing bleeding into
   anything. Dark is a slate grey with just enough blue in it to stop reading as
   neutral, and light is the warm grey the console was moulded in, because a
   white page is a lamp pointed at the face and this is a room people sit in for
   hours. The blue is 36 percent saturation at its strongest, which is a colour
   you notice only if you look for it.
   =========================================================================== */

:root:has(.app) {
  --bg:            #101319;
  --bg-deep:       #0a0c11;
  --bg-raised:     #181c24;

  --surface-1:     rgba(150, 178, 210, 0.04);
  --surface-2:     rgba(150, 178, 210, 0.075);
  --surface-3:     rgba(150, 178, 210, 0.11);
  --surface-solid: #181c24;
  --surface-panel: #12151b;
  --surface-overlay: rgba(16, 19, 25, 0.94);
  --scrim:         rgba(3, 6, 12, 0.78);

  --border-subtle: rgba(150, 178, 210, 0.10);
  --border:        rgba(150, 178, 210, 0.16);
  --border-strong: rgba(150, 178, 210, 0.28);

  --text-primary:   #e4e8ee;
  --text-secondary: #a6adb9;
  --text-tertiary:  #7d848f;
  --text-quaternary:#5d636d;
  --text-inverse:   #0d1015;

  --invert-bg:    #7e9ec2;
  --invert-fg:    #0d1015;
  --invert-hover: #93b1cf;

  --accent:        #7e9ec2;
  --accent-hover:  #93b1cf;
  --accent-pressed:#6b8cb0;
  --accent-fg:     #0d1015;
  --accent-soft:   rgba(126, 158, 194, 0.12);
  --accent-tint:   rgba(126, 158, 194, 0.06);
  --accent-border: rgba(126, 158, 194, 0.30);
  --accent-glow:   rgba(126, 158, 194, 0.18);

  --accent-2:      #a6adb9;
  --accent-2-soft: rgba(169, 183, 206, 0.12);

  --skeleton-base:  rgba(150, 178, 210, 0.06);
}

:root[data-theme="light"]:has(.app) {
  --bg:            #e7e5df;
  --bg-deep:       #dad7d0;
  --bg-raised:     #f3f1ec;

  --surface-1:     rgba(38, 42, 52, 0.03);
  --surface-2:     rgba(38, 42, 52, 0.058);
  --surface-3:     rgba(38, 42, 52, 0.088);
  --surface-solid: #f3f1ec;
  --surface-panel: #f7f5f1;
  --surface-overlay: rgba(231, 229, 223, 0.96);
  --scrim:         rgba(28, 30, 36, 0.44);

  --border-subtle: rgba(38, 42, 52, 0.085);
  --border:        rgba(38, 42, 52, 0.135);
  --border-strong: rgba(38, 42, 52, 0.24);

  --text-primary:   #24262c;
  --text-secondary: #565961;
  --text-tertiary:  #7b7e86;
  --text-quaternary:#9a9da4;
  --text-inverse:   #f4f3ef;

  --invert-bg:    #3d566f;
  --invert-fg:    #f4f3ef;
  --invert-hover: #48637d;

  --accent:        #3d566f;
  --accent-hover:  #48637d;
  --accent-pressed:#334a60;
  --accent-fg:     #f4f3ef;
  --accent-soft:   rgba(61, 86, 111, 0.09);
  --accent-tint:   rgba(61, 86, 111, 0.045);
  --accent-border: rgba(61, 86, 111, 0.26);
  --accent-glow:   rgba(61, 86, 111, 0.14);

  --accent-2:      #565961;
  --accent-2-soft: rgba(86, 89, 97, 0.1);

  --skeleton-base:  rgba(38, 42, 52, 0.07);
}


/* ===========================================================================
   The station
   ---------------------------------------------------------------------------
   Voices of the Void is a person alone at a dish array reading everything off
   dim equipment panels, and the appeal is not the horror, it is the quiet:
   working at night with instruments that just report.

   That maps onto this more closely than it has any right to. An archive of
   signals, timestamps, checksums, waveforms, somebody working alone on their
   own recordings at an hour nobody else is up. So the borrowing is narrow: the
   numbers start reading like instrument output, and the small labels above
   them like the print on a panel. No scanlines, no terminal green, no costume.
   =========================================================================== */

:root:has(.app) {
  /* Already the token every readout points at. It just resolved to whatever
     the system had, which on Windows is Consolas and reads like a code editor.
     Putting the real face first changes every duration, size and count at
     once. */
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

/* Anything that is a measurement rather than a sentence. Tabular figures so a
   column of them lines up instead of shuffling by a pixel per digit, which is
   the actual reason instruments have always been set this way. */
.meter__text,
.tally__value,
.track__meta,
.chip-version,
.link-card__url,
.upload-item__size,
.pickbar__count {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.track__meta,
.chip-version { font-size: calc(var(--text-xs) - 0.5px); }

/* The print above a dial rather than a heading in a document. Only the labels
   that sit over a group of readings; a form label stays a form label, because
   shouting UPLOAD TITLE at somebody filling in a field is not the same idea. */
.detail-heading,
.acct-fact__label,
.sec-label,
.td__fold-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}