/* ============================================================================
   Kotodom DMX — Design Tokens
   Colors + Type for the kotodom-dmx-hub / kotodom-dmx-autopilot web UI.

   Source of truth: apps/web-front/tailwind.config.js in the kotodom-dmx repo.
   The base palette mirrors the inline-HTML config page on the device exactly,
   for visual continuity between firmware-served pages and the SPA. Everything
   beyond the 8 base tokens is derived harmoniously to support the richer
   mini-QLC+ surfaces (app chrome, elevated panels, hover/press states).

   The brand uses NATIVE SYSTEM FONTS only — no webfonts. This is a deliberate
   bundle-size decision: the UI is flashed to a LittleFS partition and served
   by the device itself with no internet route, so every KB counts. Sans for
   prose/controls, mono for every technical readout (IP, channels, GPIO, hex).
   ============================================================================ */

:root {
  /* ---- Base palette — Kotodom brand ("console black · signal cyan · tungsten amber")
     NOTE: the kotodom-dmx repo's tailwind.config.js ships generic dark defaults
     (#1a1a1a / #4a90e2 …) explicitly marked "tweak freely later." Those were
     placeholders, not a brand. This is the designed replacement: a cool console
     near-black (pro lighting-desk feel), an electric teal-cyan signature for
     live signal + interaction, and a warm tungsten amber secondary. ---- */
  --bg:      #131a1d;   /* page background — cool console charcoal */
  --card:    #1b2428;   /* card / panel surface */
  --ink:     #eaf0ef;   /* primary foreground — faintly cool white */
  --muted:   #93a2a4;   /* secondary / label text */
  --line:    #2f3c40;   /* hairline borders, dividers */
  --accent:  #23c4be;   /* SIGNATURE signal cyan — links, focus, active, live data */
  --ok:      #41c96e;   /* go green — success, "save", receiving (bright, clearly green next to the cyan accent) */
  --warn:    #f2b45c;   /* tungsten amber — tips, cautions, "stale", warm scenes */

  /* ---- Derived surfaces (app chrome needs more depth than the config page) ---- */
  --bg-deep:    #0f1518;   /* app shell / behind cards, one step darker than --bg */
  --bg-sunken:  #0c1113;   /* inset wells: channel grids, code, timelines */
  --surface-2:  #222d31;   /* elevated panel / hovered card */
  --surface-3:  #2a363a;   /* control track, inactive input, raised chip */
  --hover:      #2e3b3f;   /* row / button hover fill */
  --line-soft:  #243034;   /* subtler divider than --line */
  --line-strong:#3c4b50;   /* emphasized border, focused input outline base */

  /* ---- Foreground ramp ---- */
  --ink-dim:   #c9d4d3;   /* between ink and muted */
  --faint:     #677779;   /* tertiary: hints, placeholders, disabled labels */
  --ghost:     #455457;   /* near-invisible: empty-state, off icons */

  /* ---- Interactive signal-cyan ramp ---- */
  --accent-hover: #38d3cc; /* lighter on hover */
  --accent-press: #1aa39e; /* darker on press */
  --accent-dim:   #1c6f6c; /* muted accent for borders/fills */
  --accent-wash:  rgba(35, 196, 190, 0.13); /* tinted background fill */

  /* ---- Semantic states ---- */
  --ok-hover:  #54d27e;
  --ok-press:  #2ba557;
  --ok-wash:   rgba(65, 201, 110, 0.15);
  --warn-wash: rgba(242, 180, 92, 0.14);
  --danger:    #e5484d;   /* destructive / error / blackout / DMX fault */
  --danger-hover: #ec5c61;
  --danger-wash:  rgba(229, 72, 77, 0.14);

  /* ---- DMX / fixture accents (channel heatmap + RGBW pickers) ---- */
  --dmx-r: #e5575a;   /* red channel */
  --dmx-g: #45c173;   /* green channel */
  --dmx-b: #3aa8e0;   /* blue channel — bluer than the teal accent, stays distinct */
  --dmx-w: #ede6d6;   /* white channel */
  --dmx-amber: #f2b45c;
  --dmx-uv:    #9b6fe0;
  --val-zero:  #1f2a2e;   /* a channel sitting at 0 */
  --val-full:  #eaf0ef;   /* a channel sitting at 255 */

  /* ============================ TYPE ============================ */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Weights — the device UI uses 400 body / 500 medium only. No bold/black. */
  --w-regular: 400;   /* @kind font */
  --w-medium:  500;   /* @kind font */
  --w-semibold:600;   /* @kind font */ /* reserved for app-level emphasis (autopilot), used sparingly */

  /* Type scale — anchored on the device page's 13px technical body.
     Compact, dense, engineering-tool sizing. */
  --t-display: 28px;  /* hub mode-select hero, splash */
  --t-h1:      20px;  /* page title  (App.tsx h1) */
  --t-h2:      15px;  /* card title  (Card.tsx h2) / button label */
  --t-body:    13px;  /* default technical body (StatusCard rows) */
  --t-label:   12px;  /* meta line, captions, tips (sublabel under title) */
  --t-micro:   11px;  /* pin labels, channel index, dense table headers */
  --t-data:    14px;  /* mono readouts that need to be legible at a glance */

  --lh-tight:  1.3;   /* @kind font */
  --lh-body:   1.5;   /* @kind font */
  --lh-loose:  1.7;   /* @kind font */ /* StatusCard rows */

  /* ---- Radii (device cards = 10px; controls = 6px) ---- */
  --r-sm:  4px;
  --r-md:  6px;    /* buttons, inputs */
  --r-lg:  10px;   /* cards / panels */
  --r-xl:  14px;   /* hero / large containers */
  --r-pill: 999px;

  /* ---- Spacing (4px base grid) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;   /* card padding (p-4) */
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* ---- Elevation — restrained; dark UI leans on surface contrast, not big shadows ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.55);   /* modals, popovers (cf. wiring-hub diagram) */

  --dur-fast: 120ms;  /* @kind other */
  --dur-base: 180ms;  /* @kind other */
  --ease: cubic-bezier(0.2, 0, 0.2, 1);  /* @kind other */
}

/* ============================================================================
   Semantic element styles — opt in by adding class "kd" to a container, or
   copy these rules. Mirrors the real component CSS in apps/web-front.
   ============================================================================ */
.kd {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

.kd h1 { font-size: var(--t-h1);  font-weight: var(--w-medium); margin: 0 0 var(--sp-1); }
.kd h2 { font-size: var(--t-h2);  font-weight: var(--w-medium); margin: 0 0 var(--sp-2); }
.kd .display { font-size: var(--t-display); font-weight: var(--w-medium); letter-spacing: -0.01em; }
.kd .sub   { font-size: var(--t-label); color: var(--muted); }
.kd .tip   { font-size: var(--t-label); color: var(--warn); }
.kd .mono  { font-family: var(--font-mono); }
.kd code   { font-family: var(--font-mono); font-size: var(--t-micro);
             background: var(--bg); color: var(--warn); padding: 1px 6px; border-radius: var(--r-sm); }

.kd .card  { background: var(--card); border-radius: var(--r-lg); padding: var(--sp-4); }

.kd b, .kd strong { color: var(--ink); font-weight: var(--w-medium); }