/* THE NASDEX HOUSE SHEET.
   ==========================================================================

   One system for every page the site serves outside the cabinet itself. It is
   the cabinet's own finish, read off client/style.css and client/ui/shell.js
   rather than invented here, so a visitor who has seen the machine recognises
   the pages around it.

   TWO MATERIALS, AND THEY NEVER MIX.

   1. THE CASE carries structure: page grounds, headers, footers, sidebars,
      long-form reading, anything that is furniture. It is brushed aluminium
      under a light browser and graphite under a dark one, because the same
      metal reads both ways depending on the light in the room.

   2. THE READOUT carries live and measured values: standings, epoch clocks,
      wallet state, contract addresses, formulas, the activity log. It is the
      plaque out of the cabinet, and it does not change with the browser
      scheme, because a screen is lit rather than lit upon. Black ground,
      amber for a value, pale grey for a label, a dark grey hairline.

   The readout colours are exactly the four the plaques resolve through in
   client/ui/shell.js (`TERMINAL`): #000000 ground, #4a4d55 rules, #c8cbd0
   labels, #f5a623 ink. The case colours are the ones client/style.css sets
   under html[data-cab="nasdex"]: #c3c5c9 aluminium, #55565b machined
   hairline, #1f2024 deck, #35d94a status LED.

   CONTRAST. Every foreground and background pair used for text clears WCAG
   AA at 4.5:1, measured, and the pairs are listed beside the tokens. The
   --nx-line tokens are the one deliberate exception: they draw hairlines and
   frames, never text, so they are tuned to be seen rather than read. */

:root {
  /* The page follows the browser. Both schemes are authored below; nothing
     depends on which one the visitor happens to be in. */
  color-scheme: light dark;

  /* ---- the readout: identical in both schemes ------------------------- */
  --nx-rd-bg:     #000000;
  --nx-rd-ink:    #f5a623;   /* 10.36:1 on #000 */
  --nx-rd-label:  #c8cbd0;   /* 12.91:1 on #000 */
  --nx-rd-dim:    #8a8e96;   /*  6.39:1 on #000 */
  --nx-rd-live:   #35d94a;   /* 11.18:1 on #000 */
  --nx-rd-alert:  #ff8a80;   /*  9.20:1 on #000 */
  --nx-rd-rule:   #4a4d55;   /* hairlines and hatching only, never text */
  --nx-rd-frame:  #1a1b1e;   /* the graphite frame a plate sits in */
  --nx-rd-glow:   rgba(245, 166, 35, .16);

  /* ---- the case: light browser, aluminium in daylight ------------------ */
  --nx-ground:      #d5d7da;
  --nx-sunk:        #c9cbcf;
  --nx-surface:     #e6e7ea;
  --nx-surface-2:   #dcdee1;
  --nx-ink:         #1c1d21;   /* 13.62:1 on --nx-surface */
  --nx-ink-2:       #3c3d42;   /*  8.76:1 on --nx-surface */
  --nx-muted:       #54565c;   /*  5.93:1 on --nx-surface, 4.52:1 on --nx-sunk */
  --nx-accent:      #7a4800;   /*  6.17:1 on --nx-surface, amber held down for a light ground */
  --nx-accent-2:    #9a5c00;
  --nx-accent-dim:  #b9975e;
  --nx-live:        #1a6b2b;   /*  5.34:1 on --nx-surface */
  --nx-alert:       #9d2018;   /*  6.40:1 on --nx-surface */
  --nx-line:        #b1b3b8;
  --nx-line-soft:   #c6c8cc;
  --nx-line-strong: #8e9095;
  --nx-drop:        rgba(20, 21, 24, .18);

  /* ---- the metal itself, for the chamfers and brushing ---------------- */
  --nx-alu:      #c3c5c9;
  --nx-alu-hi:   #dedfe2;
  --nx-alu-lo:   #8e9095;
  --nx-hair:     #55565b;
  --nx-graphite: #35373c;

  /* ---- type ----------------------------------------------------------- */
  /* The machine is a machine, so its pages are set in the terminal face.
     Only a long read gets the sans, and only for its body copy. */
  --nx-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --nx-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --nx-track-legend: .16em;   /* engraved legends and eyebrows */
  --nx-track-label:  .11em;   /* readout labels */
  --nx-track-title: -.045em;  /* the big set numbers and headlines */

  /* ---- spacing: one 4px scale, used everywhere ------------------------ */
  --nx-1: 4px;
  --nx-2: 8px;
  --nx-3: 14px;
  --nx-4: 22px;
  --nx-5: 34px;
  --nx-6: 52px;
  --nx-7: 80px;
}

/* ---- the case: dark browser, the same metal in a dark room ------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --nx-ground:      #121316;
    --nx-sunk:        #0a0a0d;
    --nx-surface:     #1c1d21;
    --nx-surface-2:   #26272c;
    --nx-ink:         #e8e9ec;   /* 13.87:1 on --nx-surface */
    --nx-ink-2:       #c8cbd0;   /* 10.35:1 on --nx-surface */
    --nx-muted:       #a4a7ae;   /*  6.99:1 on --nx-surface, 6.19:1 on --nx-surface-2 */
    --nx-accent:      #f5a623;   /*  8.31:1 on --nx-surface */
    --nx-accent-2:    #c98314;   /*  5.40:1 on --nx-surface */
    --nx-accent-dim:  #6a4a10;
    --nx-live:        #35d94a;   /*  8.96:1 on --nx-surface */
    --nx-alert:       #ff8a80;   /*  7.38:1 on --nx-surface */
    --nx-line:        #34363b;
    --nx-line-soft:   #26272c;
    --nx-line-strong: #55565b;
    --nx-drop:        rgba(0, 0, 0, .55);
  }
}

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

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

html { min-width: 320px; background: var(--nx-ground); }

body {
  margin: 0;
  background: var(--nx-ground);
  color: var(--nx-ink);
  font-family: var(--nx-mono);
  font-variant-numeric: tabular-nums;
  -webkit-text-size-adjust: 100%;
}

button, input, select { font: inherit; color: inherit; }

/* One focus ring across the whole site, in the accent, which clears 3:1
   against every surface it can land on in either scheme. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--nx-accent);
  outline-offset: 3px;
}

/* THE MACHINED EDGE. A hairline all round, a light line inside it at the top
   left and a dark one at the bottom right: the same chamfer the case carries,
   at one pixel, for any panel that wants to read as a milled part. */
.nx-chamfer {
  box-shadow:
    inset 0 0 0 1px var(--nx-line),
    inset 1px 1px 0 1px rgba(255, 255, 255, .10),
    inset -1px -1px 0 1px rgba(0, 0, 0, .22);
}

/* THE READOUT. Any panel carrying a live or measured value takes this, and
   with it the terminal's own four colours, in both browser schemes. */
.nx-readout {
  background: var(--nx-rd-bg);
  color: var(--nx-rd-label);
  box-shadow:
    inset 0 0 0 1px var(--nx-rd-frame),
    inset 0 0 0 2px rgba(255, 255, 255, .04);
}
.nx-readout .nx-value,
.nx-readout b,
.nx-readout strong { color: var(--nx-rd-ink); }
.nx-readout .nx-label,
.nx-readout dt,
.nx-readout th { color: var(--nx-rd-dim); }
.nx-readout hr,
.nx-readout .nx-rule { border: 0; border-top: 1px solid var(--nx-rd-rule); margin: var(--nx-3) 0; }

/* An engraved legend: the small tracked capitals the case prints. */
.nx-legend {
  font-family: var(--nx-mono);
  font-size: 10px;
  letter-spacing: var(--nx-track-legend);
  text-transform: uppercase;
  color: var(--nx-muted);
}

/* The scanline the plaque glass carries, at the strength of a hint. Kept off
   for anyone who has asked the platform to stop moving things. */
.nx-scan { position: relative; }
.nx-scan::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .35;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px);
}

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