/* ============================================================
   THE EDITOR — design tokens (single source of truth)
   Change the brand here; every surface follows.
   Values match the previous per-view :root blocks so adopting
   this file is visually neutral.
   ============================================================ */
:root{
  /* ---- brand / colour ---- */
  --pri:      #0b5cad;   /* primary brand */
  --pri-soft: #eef2f8;   /* tint: alt buttons, pills, chips */
  --pri-weak: #f4f8ff;   /* hover wash on tinted rows */
  --ink:      #1a2230;   /* primary text */
  --mut:      #6b7686;   /* muted/secondary text */
  --line:     #e2e7ef;   /* borders & dividers */
  --bg:       #f4f6fa;   /* app background */
  --surface:  #ffffff;   /* cards, panels, header */
  --ok:       #1f9d4d;   /* success */
  --danger:   #c92a2a;   /* errors */

  /* ---- typography ---- */
  --font: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "Courier New", ui-monospace, monospace;

  /* ---- spacing scale ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 22px;
  --sp-6: 28px;

  /* ---- radii ---- */
  --r-sm: 6px;
  --r:    8px;
  --r-lg: 10px;
  --r-xl: 12px;

  /* ---- elevation ---- */
  --sh-1: 0 1px 3px rgba(20,28,44,.08);
  --sh-2: 0 6px 20px rgba(11,92,173,.12);
  --sh-3: 0 4px 20px rgba(20,28,44,.17);
}

/* ---- universal base (identical across every surface) ---- */
*{ box-sizing:border-box }
body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
}

/* ---- structural state hooks ----
   JS toggles these, never inline visual styles. */
.is-hidden,
[hidden]{ display:none !important; }