/*
 * sanctions-ops-portal — Tabler token bridge (Tabler programme A1). ⭐ THE PIÈCE MAÎTRESSE.
 *
 * Direction of the wiring — and this is the whole point of the story:
 *   Tabler's --tblr-* variables  →  CONSUME  →  our semantic tokens (tokens-semantic.css).
 *
 * So the source of truth stays OURS. When a per-tenant theme (wafacash/lanacash, a later story)
 * redefines a semantic token like --color-primary, every Tabler component that reads --tblr-primary
 * follows automatically. ⛔ The reverse — our tokens expressed as var(--tblr-*) — would let Tabler
 * silently own the palette and kill per-tenant theming; TokenBridgeDirectionGuardTest fails the
 * build if any such reversal ever lands here.
 *
 * Load order (see login.html): tokens-primitive → tokens-semantic → tabler(.rtl).min.css → THIS →
 * portal.css. This block comes AFTER tabler's own :root defaults, so by the cascade these overrides win.
 */

:root {
  /* Surface + text */
  --tblr-body-bg:       var(--color-bg);
  --tblr-body-color:    var(--color-text);
  --tblr-border-color:  var(--color-border);
  --tblr-secondary-color: var(--color-muted);

  /* Brand accent (the hue is owned by --color-primary; the rgb triplet mirrors #1B6FA8 for
   * Tabler's alpha-glow uses — CSS cannot derive a triplet from a hex custom property). */
  --tblr-primary:      var(--color-primary);
  --tblr-primary-rgb:  27, 111, 168;
  --tblr-link-color:   var(--color-primary);

  /* Status */
  --tblr-danger:   var(--color-danger);
  --tblr-success:  var(--color-success);
  --tblr-warning:  var(--color-warning);
  --tblr-info:     var(--color-info);

  /* Shape + type */
  --tblr-border-radius:      var(--radius-md);
  --tblr-border-radius-sm:   var(--radius-sm);
  --tblr-border-radius-pill: var(--radius-pill);
  --tblr-font-sans-serif:    var(--font-family);
}

/* Page surface follows our semantic tokens (deterministic regardless of legacy portal.css order). */
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
}

/* Focus ring uses our semantic focus token so keyboard focus is a first-class, themeable state. */
.btn:focus-visible,
.form-control:focus,
.form-select:focus {
  box-shadow: var(--focus-ring);
}