/* ============================================================================
   Tech App · v2 — "Clean Service Desk"
   A ground-up LIGHT design system for the in-bay tablet surface. Loaded AFTER
   styles.css/screens.css so its tokens win; redesigned surfaces (shell, board,
   job detail) use the .tx-* primitives below. Untouched screens keep their old
   classes but inherit this palette + Inter as a free uplift.

   Fonts (Inter Variable + JetBrains Mono Variable) are self-hosted and imported
   from the tech +layout.svelte — CSP blocks Google Fonts here.
   ========================================================================== */

.tech-root {
  /* ── Type ─────────────────────────────────────────────────────────────── */
  --font-ui:      "Inter Variable", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Inter Variable", system-ui, sans-serif;  /* one family, weight-driven */
  --font-data:    "JetBrains Mono Variable", ui-monospace, "Cascadia Code", Consolas, monospace;

  /* ── Brand red ────────────────────────────────────────────────────────── */
  --brand:       #e11d2e;   /* the one action/identity red */
  --brand-hover: #c81528;
  --brand-press: #a90f1f;
  --brand-text:  #c2101f;   /* red used as TEXT on light — AA (≥4.5:1 on white) */
  --brand-soft:  rgba(225, 29, 46, 0.10);   /* active-nav / chip tint */
  --brand-soft2: rgba(225, 29, 46, 0.16);
  --on-brand:    #ffffff;

  /* ── Neutrals (cool slate ramp) ───────────────────────────────────────── */
  --bg:        #f3f5f8;   /* app canvas behind cards/panels */
  --surface:   #ffffff;   /* cards, panels, the rail */
  --surface-2: #f0f2f6;   /* insets, fields, sunken rows */
  --surface-3: #e7eaf0;   /* hover on sunken / track fills */

  --ink:       #14181f;   /* primary text   — ~16:1 on white */
  --ink-2:     #3a4250;   /* secondary      — ~9.4:1 */
  --ink-3:     #586173;   /* tertiary/body  — ~5.7:1  (placeholders use this) */
  --ink-faint: #8a92a0;   /* decorative/icons only — not body text */

  --line:        rgba(20, 24, 31, 0.08);
  --line-2:      rgba(20, 24, 31, 0.14);
  --line-strong: rgba(20, 24, 31, 0.14);   /* back-compat alias for old screens */

  /* ── Status tones (AA text on its own faint tint) ─────────────────────── */
  --go-text:    #c2101f;  --go-bg:    rgba(225, 29, 46, 0.12);   /* in-progress / needed */
  --done-text:  #15803d;  --done-bg:  rgba(22, 163, 74, 0.14);   /* completed / received */
  --hold-text:  #b45309;  --hold-bg:  rgba(180, 115, 10, 0.14);  /* on hold / on order-ish */
  --info-text:  #1d4ed8;  --info-bg:  rgba(29, 78, 216, 0.12);   /* ordered */
  --violet-text:#6d28d9;  --violet-bg:rgba(109, 40, 217, 0.12);  /* write-up */
  --done:       #16a34a;  /* graphical green (dots, bars) */

  /* back-compat aliases consumed by old screens.css */
  --elevated:    var(--surface-3);
  --surface-sunken: var(--surface-2);
  --queued:      var(--hold-text);   --queued-bg:   var(--hold-bg);
  --progress:    var(--brand);       --progress-bg: var(--brand-soft);
  --writeup:     var(--violet-text); --writeup-bg:  var(--violet-bg);
  --done-bg-c:   var(--done-bg);

  /* ── Radius ───────────────────────────────────────────────────────────── */
  --r-sm:   8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  20px;
  --r-pill: 999px;

  /* ── Elevation ────────────────────────────────────────────────────────── */
  --shadow-1:   0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .07);
  --shadow-2:   0 6px 16px -6px rgba(16, 24, 40, .12), 0 2px 6px -2px rgba(16, 24, 40, .06);
  --shadow-pop: 0 28px 56px -16px rgba(16, 24, 40, .22), 0 8px 20px -10px rgba(16, 24, 40, .14);
  --focus:      0 0 0 3px rgba(225, 29, 46, 0.32);

  /* ── Spacing scale (4pt) ──────────────────────────────────────────────── */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  --scrim: rgba(20, 24, 31, 0.46);
  --ease:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);

  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--ink);
  font-feature-settings: "cv05" 1, "ss01" 1;   /* Inter: open digits, single-storey a */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Dark (opt-in toggle) — a coherent companion, not the default ───────── */
.tech-root.tech-dark {
  --brand:       #f43d4a;
  --brand-hover: #f6606b;
  --brand-press: #cf1a2a;
  --brand-text:  #ff8088;
  --brand-soft:  rgba(244, 61, 74, 0.16);
  --brand-soft2: rgba(244, 61, 74, 0.24);

  --bg:        #11141a;
  --surface:   #181c24;
  --surface-2: #20242e;
  --surface-3: #2a2f3b;

  --ink:       #f1f3f7;
  --ink-2:     #c2c8d4;
  --ink-3:     #98a0b0;
  --ink-faint: #6c7484;

  --line:        rgba(255, 255, 255, 0.09);
  --line-2:      rgba(255, 255, 255, 0.16);
  --line-strong: rgba(255, 255, 255, 0.16);

  --go-text:    #ff9098;  --go-bg:    rgba(244, 61, 74, 0.18);
  --done-text:  #5bd98b;  --done-bg:  rgba(34, 197, 94, 0.16);
  --hold-text:  #fbbf24;  --hold-bg:  rgba(251, 191, 36, 0.15);
  --info-text:  #7aa2ff;  --info-bg:  rgba(96, 139, 255, 0.16);
  --violet-text:#b794ff;  --violet-bg:rgba(139, 92, 246, 0.18);

  --shadow-1:   0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2:   0 8px 22px -8px rgba(0, 0, 0, .55);
  --shadow-pop: 0 30px 60px -16px rgba(0, 0, 0, .6);
  --scrim: rgba(0, 0, 0, 0.6);
}

/* ── Global focus for the redesigned surface ────────────────────────────── */
.tech-root :where(a, button, input, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-radius: var(--r-sm);
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.tx-btn {
  --_bg: var(--surface);
  --_fg: var(--ink);
  --_bd: var(--line-2);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  font-family: var(--font-ui); font-size: 0.9375rem; font-weight: 600; line-height: 1;
  color: var(--_fg); background: var(--_bg);
  border: 1px solid var(--_bd); border-radius: var(--r-md);
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: background .15s var(--ease), border-color .15s var(--ease),
              transform .06s var(--ease), box-shadow .15s var(--ease);
}
.tx-btn:hover { background: var(--surface-2); }
.tx-btn:active { transform: translateY(1px); }
.tx-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.tx-btn--primary {
  --_bg: var(--brand); --_fg: var(--on-brand); --_bd: transparent;
  font-weight: 700;                 /* AA: white on brand red as large-bold (≥3:1) */
  box-shadow: 0 1px 2px rgba(225,29,46,.30);
}
.tx-btn--primary:hover { background: var(--brand-hover); }
.tx-btn--primary:active { background: var(--brand-press); }

.tx-btn--go {
  --_bg: #15803d; --_fg: #fff; --_bd: transparent; font-weight: 700;
  box-shadow: 0 1px 2px rgba(21,128,61,.30);
}
.tx-btn--go:hover { background: #166534; }

.tx-btn--ghost { --_bg: var(--surface); --_fg: var(--ink); --_bd: var(--line-2); }
.tx-btn--ghost:hover { background: var(--surface-2); border-color: var(--line-2); }

.tx-btn--quiet { --_bg: transparent; --_fg: var(--ink-3); --_bd: transparent; }
.tx-btn--quiet:hover { background: var(--surface-2); color: var(--ink); }

.tx-btn--block { width: 100%; }
.tx-btn--lg { min-height: 52px; font-size: 1rem; padding: 0 22px; border-radius: var(--r-md); }
.tx-btn--icon { padding: 0; width: 44px; }

/* ── Status pills ───────────────────────────────────────────────────────── */
.tx-pill {
  --_t: var(--ink-3); --_b: var(--surface-2);
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px;
  font-family: var(--font-ui); font-size: 0.75rem; font-weight: 650; letter-spacing: .01em;
  color: var(--_t); background: var(--_b);
  border-radius: var(--r-pill); white-space: nowrap;
}
.tx-pill .tx-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tx-pill--go     { --_t: var(--go-text);     --_b: var(--go-bg); }
.tx-pill--done   { --_t: var(--done-text);   --_b: var(--done-bg); }
.tx-pill--hold   { --_t: var(--hold-text);   --_b: var(--hold-bg); }
.tx-pill--info   { --_t: var(--info-text);   --_b: var(--info-bg); }
.tx-pill--violet { --_t: var(--violet-text); --_b: var(--violet-bg); }
.tx-pill--neutral{ --_t: var(--ink-3);       --_b: var(--surface-2); }

/* ── Card / panel ───────────────────────────────────────────────────────── */
.tx-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}

/* ── Field ──────────────────────────────────────────────────────────────── */
.tx-field {
  min-height: 44px; padding: 0 14px;
  font-family: var(--font-ui); font-size: 1rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-md); transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.tx-field::placeholder { color: var(--ink-3); }
.tx-field:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus); }

/* ── Scroll surface ─────────────────────────────────────────────────────── */
.tx-scroll { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.tx-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.tx-scroll::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
.tx-scroll::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); background-clip: content-box; }

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