/* tokens-portal.css — portal design tokens, PUZL (spec-puzl-hub-rebrand.md P1a).
 *
 * The token NAMES are unchanged: every portal template and components.css
 * reads --bg, --accent, --text and the rest, so the rebrand reaches inner
 * screens through these values alone. The PUZL palette is also exposed
 * under its own names (--paper, --ink, --cobalt, --marigold, --sage) for the
 * shell and sign-in pages, which follow the approved mockups directly.
 */
: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;
  --border:      var(--line);
  --border-2:    #C5CCBE;
  --accent:      var(--cobalt);
  --accent-dim:  rgba(43,69,240,0.10);
  --text:        var(--ink);
  --text-2:      var(--ink-soft);
  --text-3:      #5B667C;
  --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);
  --font-hd:     'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body:   'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:   'JetBrains Mono', monospace;
  /* ── Admin-layout token aliases (portal light theme) ── */
  --cyan:         var(--accent);
  --magenta:      var(--accent);
  --font-display: var(--font-hd);
  --r:           12px;
  --r-sm:        8px;
  --ease:        130ms ease;
  /* ── Theme-divergent component tokens ────────────────── */
  --nav-bg:               rgba(255,255,255,0.96);
  --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 ───── */
  --warning:    #f59e0b;
  --warning-bg: rgba(245,158,11,0.10);
  --warning-br: rgba(245,158,11,0.25);
}