/* ============================================================================
   ASN Intelligence — shared design system (enterprise foundation)
   Linked by every surface BEFORE its inline <style>, so each surface's own
   :root still wins for any token it already defines. This file is ADDITIVE:
   it (a) fills referenced-but-undefined tokens so silently-broken borders/cards
   render, (b) introduces the canonical type/space/radius/shadow/status scales
   for migration, and (c) adds the global interaction states (focus / disabled /
   active) that were missing across all surfaces. Single source of truth =
   consistent, polished, corporate. Per-tenant white-label overrides --accent.
   ============================================================================ */
:root{
  /* --- fill referenced-but-undefined tokens (fixes invisible borders/cards) --- */
  --line: rgba(255,255,255,.08);          /* used 44x across surfaces, was defined in only one */
  --card: #16161d;
  --card-2: #1c1c25;
  --faint: #8a8a93;                        /* AA-safe muted; surfaces that define --faint still win */

  /* --- canonical brand accent (surfaces override per tenant) --- */
  --accent-soft: rgba(37,99,235,.30);      /* focus rings / low-alpha fills */
  --accent-contrast: #ffffff;

  /* --- type scale (6 steps + hero) --- */
  --fs-xs:12px; --fs-sm:13px; --fs-base:14px; --fs-lg:16px; --fs-xl:20px; --fs-2xl:26px; --fs-hero:32px;
  --fw-regular:400; --fw-medium:600; --fw-bold:700;

  /* --- spacing scale (4px base) --- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px;

  /* --- radius + elevation --- */
  --r-sm:8px; --r-md:12px; --r-lg:16px;
  --shadow-1:0 1px 3px rgba(0,0,0,.30), 0 1px 2px rgba(0,0,0,.20);
  --shadow-2:0 16px 48px rgba(0,0,0,.55);

  /* --- semantic status (reserve for meaning, not decoration) --- */
  --positive:#3fb950; --warning:#d29922; --danger:#f85149; --info:#2563EB;
}

/* ============================================================================
   Global interaction states — the audit found focus-visible=0 and :disabled
   styling absent across ALL 5 surfaces. These are additive and safe.
   ============================================================================ */
a, button, .btn, .ghost, .navb, .seg button, .oc, [role="button"]{
  transition: filter .12s ease, transform .05s ease, box-shadow .12s ease, background-color .12s ease;
}
/* keyboard focus is always visible (outline doesn't affect layout) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible,
.btn:focus-visible, .ghost:focus-visible, .navb:focus-visible, .oc:focus-visible{
  outline: 2px solid var(--accent-soft);
  outline-offset: 2px;
}
/* pressed feedback */
.btn:active, button.btn:active, .ghost:active, .oc:active{ transform: translateY(1px); filter: brightness(.94); }
/* disabled controls look disabled (JS toggles .disabled in many places) */
button:disabled, .btn:disabled, .btn[disabled], button[disabled], .ghost:disabled{
  opacity:.5; cursor:not-allowed; filter:none !important; transform:none !important;
}
/* modal depth, where a surface uses the shared .modal / .modal-bg pattern */
.modal-bg{ backdrop-filter: blur(3px); }
.modal{ box-shadow: var(--shadow-2); }

/* reusable enterprise utilities (opt-in; don't affect existing markup) --------- */
.skeleton{ position:relative; overflow:hidden; background:var(--card-2,#1c1c25); border-radius:var(--r-sm); }
.skeleton::after{ content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); animation:asnshimmer 1.3s infinite; }
@keyframes asnshimmer{ 100%{ transform:translateX(100%); } }

/* ============================================================================
   Reduced-motion — respect the OS "reduce motion" accessibility setting across
   every surface that loads this file (audit found this missing app-wide). Safe,
   additive: near-instant transitions/animations only when the user asked for it.
   ============================================================================ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}