/* tokens-admin.css — admin design tokens, PUZL light (spec-puzl-hub-rebrand.md
 * P1c; mockup M5: admin goes LIGHT, PUZL paper, not dark).
 *
 * The token NAMES are unchanged: every admin template, components.css and
 * the shared dashboard partials read --bg, --accent, --text and the rest, so
 * the rebrand reaches inner screens through these values alone. The values
 * match tokens-portal.css, so the two surfaces share one palette. The names
 * the portal does not define are admin-only aliases older templates use.
 */
:root {
  /* ── PUZL palette (sites/puzl/index.html) ── */
  --paper:       #F4F6F1;
  --ink:         #14213A;
  --ink-soft:    #4A5670;
  --cobalt:      #2B45F0;
  --cobalt-deep: #1B2DB0;
  --marigold:    #FFC53D;
  --sage:        #D3E6D8;
  --line:        #D9DED3;
  --r-lg:        22px;

  --bg:          var(--paper);
  --surface:     #ffffff;
  --surface-2:   #EEF1EA;
  --surface-3:   #E3E8DD;
  /* ── Borders ──────────────────────────────────────── */
  --border:      var(--line);
  --border-2:    #C5CCBE;
  --border-mid:  var(--border-2);
  /* ── Accents ──────────────────────────────────────── */
  --accent:      var(--cobalt);
  --accent-dim:  rgba(43,69,240,0.10);
  /* The second accent was magenta on dark. On paper it is the deep cobalt,
   * so anything drawn in both accents still shows two colours. */
  --accent-2:    var(--cobalt-deep);
  --cyan:        var(--accent);
  --cyan-dim:    var(--accent-dim);
  --magenta:     var(--accent-2);
  /* ── Text ─────────────────────────────────────────── */
  --text:        var(--ink);
  --text-2:      var(--ink-soft);
  --text-3:      #5B667C;
  --text-muted:  var(--text-2);  /* alias used by source_dashboard.html */
  /* ── Status ───────────────────────────────────────── */
  --success:     #16a34a;
  --success-bg:  rgba(22,163,74,0.08);
  --success-br:  rgba(22,163,74,0.20);
  --error:       #dc2626;
  --error-bg:    rgba(220,38,38,0.08);
  --error-br:    rgba(220,38,38,0.20);
  --running:     #2563eb;
  --running-bg:  rgba(37,99,235,0.08);
  --running-br:  rgba(37,99,235,0.20);
  --never-bg:    rgba(0,0,0,0.03);
  --never-br:    rgba(0,0,0,0.08);
  /* ── Typography ───────────────────────────────────── */
  --font-hd:     'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-display: var(--font-hd);  /* alias used by source_dashboard.html */
  --font-body:   'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:   'JetBrains Mono', monospace;
  /* ── Radius / timing ──────────────────────────────── */
  --r:           12px;
  --r-sm:        8px;
  --radius:      12px;
  --radius-lg:   22px;
  --ease:        130ms ease;
  /* ── Was a neon glow. On paper it is a soft shadow. ── */
  --glow-cyan:    0 2px 10px rgba(43,69,240,0.16);
  --glow-magenta: 0 2px 10px rgba(27,45,176,0.16);
  /* ── Theme-divergent component tokens ────────────────── */
  --nav-bg:               #ffffff;
  --link-hover:           var(--cobalt-deep);
  --btn-primary-fg:       #ffffff;
  --btn-primary-hover-bg: var(--cobalt-deep);
  --btn-danger-hover-fg:  #ffffff;
  --tile-hover-shadow:       0 4px 18px rgba(20,33,58,0.08);
  --tile-error-hover-shadow: 0 4px 18px rgba(220,38,38,0.10);
  /* ── Warning (amber) — review / sensitivity badges. Text amber, as M5
   *    sets it: #f59e0b on white is about 2:1; this is 5.6:1. ── */
  --warning:    #8A6400;
  --warning-bg: rgba(245,158,11,0.10);
  --warning-br: rgba(245,158,11,0.25);
}