/* ET66 tokens and primitives for the dependency-free pages (market portal,
   R19 evidence; the cockpit mirrors these values).
   Source of truth: ui/dashboard/frontend/src/styles.css. The page body is the
   charcoal of its dark theme in both colour schemes (the live dashboard's
   chrome is charcoal in both); .et66-beige carries the beige workspace card
   tokens. Lamp tokens are separate from text tones: text tones are light in
   the charcoal body and would make pastel lamps. Keep the two files in step. */
:root {
  color-scheme: dark;

  /* Charcoal body */
  --bg: #191a19;
  --bg-alt: #191a19;
  --panel: #242622;
  --panel-raised: #222421;
  --panel-border: #40443a;
  --panel-border-strong: #5a5e53;
  --workspace-border: #363834;
  --text: #dedfd9;
  --text-secondary: #b0b4a8;
  --muted: #9b9e96;

  /* Text tones (state words, never lamp fills) */
  --good: #7fae8c;
  --warn: #d2b679;
  --bad: #e0806f;
  --info: #8ca6b0;

  /* Gray-green LCD */
  --lcd-bg: #8b9682;
  --lcd-text: #1a1f17;
  --lcd-border: #a4ae9b;

  /* Depth */
  --shadow: inset 1px 1px 2px rgb(255 255 255 / .04), inset -1px -1px 2px rgb(0 0 0 / .6);
  --shadow-recessed: inset 0 2px 4px rgb(0 0 0 / .5), inset 0 -1px 1px rgb(255 255 255 / .03);

  /* Lamps (ET66 keys). Yellow --lamp-select marks a selected item, never a status. */
  --lamp-good: #4a8558;
  --lamp-warn: #c58b38;
  --lamp-bad: #c24a35;
  --lamp-info: #5a819a;
  --lamp-neutral: #76776f;
  --lamp-select: #e3b62d;
  --lamp-top: .32;
  --lamp-rim: .45;
  --lamp-bezel: rgb(255 255 255 / .12);
  --lamp-drop: 0 2px 4px rgb(0 0 0 / .5);
  --lamp-ring: #b0b4a8;

  /* Keys (buttons) */
  --control-bg: #2b2e29;
  --control-text: #dedfd9;
  --control-border: #4a4e44;
  --control-highlight: rgb(255 255 255 / .07);
  --control-rim: rgb(0 0 0 / .45);
  --control-drop: 0 1px 2px rgb(0 0 0 / .5);
  --control-hover-bg: #343731;
  --control-active-bg: #b9b8b0;
  --control-active-text: #171717;
  --focus-ring: #e3b62d;

  /* Page chrome */
  --chrome-text: #dedfd9;
  --chrome-muted: #9b9e96;
  --chrome-border: #363834;
  --chrome-divider: #52554c;
  --chrome-hover: #282b26;

  /* Typography. Figures: DIN first, then real monospace faces on every
     platform, so text never lands on Courier. */
  --font-sans: "Helvetica Neue", "Avenir Next", "PingFang TC", "Hiragino Sans", "Noto Sans TC", "Microsoft JhengHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "DIN Alternate", "DIN Condensed", ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", "Liberation Mono", "DejaVu Sans Mono", monospace;
  --font-display: var(--font-mono);

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

/* Beige workspace card (the live dashboard's .reference-workspace), same in
   both schemes. Text tokens reach 4.5:1 on its backgrounds; lamps reach 3:1. */
.et66-beige {
  color-scheme: light;
  --bg: #d4d5ce;
  --bg-alt: #c9cbc2;
  --panel: #daddd3;
  --panel-border: #aeb3a5;
  --panel-border-strong: #8e9583;
  --text: #20251e;
  --text-secondary: #474e44;
  --muted: #4f564a;
  --good: #2d5e39;
  --warn: #734c0a;
  --bad: #9b2a24;
  --info: #365869;
  --lamp-good: #2f633c;
  --lamp-warn: #94600f;
  --lamp-bad: #a52d26;
  --lamp-info: #3e6578;
  --lamp-neutral: #666d60;
  --lamp-top: .40;
  --lamp-rim: .40;
  --lamp-bezel: transparent;
  --lamp-drop: 0 2px 4px rgb(32 37 30 / .45);
  --lamp-ring: #474e44;
  --control-bg: #bdc2b5;
  --control-text: #20251e;
  --control-border: #9ea792;
  --control-highlight: rgb(255 255 255 / .45);
  --control-rim: rgb(32 37 30 / .16);
  --control-drop: 0 1px 1px rgb(32 37 30 / .22);
  --control-hover-bg: #c7ccbf;
  --control-active-bg: #282e25;
  --control-active-text: #f0f2e9;
  --focus-ring: #7a5710;
  background: var(--bg);
  color: var(--text);
}

/* Base */
html {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body { margin: 0; background: var(--bg); color: var(--text); }
*, *::before, *::after { box-sizing: border-box; }
:where(a, button, summary, [tabindex]):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Lamp: one matte convex bead. Fill from --lamp (tone class), soft top light,
   darker lower rim, hairline bezel, short drop shadow. Nothing inside it, no
   glow. State is never colour-only: a printed legend sits beside every lamp. */
.et66-lamp {
  display: inline-block;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--lamp, var(--lamp-neutral));
  box-shadow:
    inset 1px 1px 3px rgb(255 255 255 / var(--lamp-top)),
    inset -1px -2px 3px rgb(0 0 0 / var(--lamp-rim)),
    0 0 0 1px var(--lamp-bezel),
    var(--lamp-drop);
}
.et66-lamp-sm {
  flex-basis: 10px;
  width: 10px;
  height: 10px;
  box-shadow:
    inset 1px 1px 2px rgb(255 255 255 / var(--lamp-top)),
    inset -1px -1px 2px rgb(0 0 0 / var(--lamp-rim)),
    0 0 0 1px var(--lamp-bezel),
    0 1px 2px rgb(0 0 0 / .4);
}
.et66-lamp-good { --lamp: var(--lamp-good); }
.et66-lamp-warn { --lamp: var(--lamp-warn); }
.et66-lamp-bad { --lamp: var(--lamp-bad); }
.et66-lamp-info { --lamp: var(--lamp-info); }
.et66-lamp-neutral { --lamp: var(--lamp-neutral); }

/* Printed legend beside a lamp: emphasis by weight, never by tone colour. */
.et66-legend {
  font: 500 10px/1.2 var(--font-sans);
  letter-spacing: .06em;
  color: var(--muted);
}
.et66-legend-strong { color: var(--text); font-weight: 600; }

/* Gray-green LCD readout with DIN tabular figures. */
.et66-lcd {
  background: var(--lcd-bg);
  color: var(--lcd-text);
  border: 1px solid var(--lcd-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-recessed);
}
.et66-figure {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

/* Matte panel on the charcoal body. */
.et66-panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
}

.et66-eyebrow {
  margin: 0;
  font: 600 11px/1.4 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.et66-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--panel-border-strong);
  border-radius: var(--radius-sm);
  font: 600 11px/1.3 var(--font-sans);
  letter-spacing: .04em;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Key: a raised matte button; pressed sinks into the body. Text only. */
.et66-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 14px;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-sm);
  background: var(--control-bg);
  color: var(--control-text);
  font: 600 12px/1.2 var(--font-sans);
  letter-spacing: .04em;
  cursor: pointer;
  box-shadow: inset 0 1px 0 var(--control-highlight), inset 0 -2px 2px var(--control-rim), var(--control-drop);
  transition: background-color 80ms ease;
}
.et66-key:hover { background: var(--control-hover-bg); }
.et66-key:active { box-shadow: var(--shadow-recessed); transform: translateY(1px); }
.et66-key:disabled { opacity: .6; cursor: not-allowed; box-shadow: none; transform: none; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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