/*
 * sanctions-ops-portal — Tier 2: semantic alias tokens (Tabler programme A1).
 *
 * These are the tokens the UI references and that Tabler consumes (via tabler-bridge.css).
 * Default = B3G light theme. Names mirror operator-portal's tokens-semantic.css.
 *
 * ⭐ THE SOURCE OF TRUTH. Per-tenant theming (wafacash/lanacash, a later story) works by
 * REDEFINING these semantic tokens — e.g. a tenant stylesheet overrides --color-primary. Because
 * Tabler's --tblr-* variables are wired to CONSUME these (tabler-bridge.css), a tenant override
 * flows into every Tabler component automatically. ⛔ If the direction were reversed (our tokens
 * expressed in terms of --tblr-*), a tenant override would be silently ignored and per-tenant
 * theming would die — TokenBridgeDirectionGuardTest fails the build if that reversal ever ships.
 */

:root {
  /* Color */
  --color-primary:        var(--b3g-blue-700);
  --color-primary-strong: var(--b3g-blue-700);
  --color-secondary:      var(--b3g-green-500);
  --color-accent:         var(--b3g-orange-500);
  --color-bg:             var(--b3g-gray-100);
  --color-surface:        var(--b3g-white);
  --color-text:           var(--b3g-ink-900);
  --color-muted:          #64748B;
  --color-on-primary:     var(--b3g-white);
  --color-border:         #DEE3EA;
  --color-success:        var(--b3g-green-500);
  --color-warning:        var(--b3g-orange-500);
  --color-danger:         var(--primitive-danger);
  --color-info:           var(--b3g-blue-500);

  /* Border radius */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-pill: 999px;

  /* Typography */
  --font-family:    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-family-ar: "Noto Kufi Arabic", "Noto Sans Arabic", Arial, sans-serif;

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(27, 111, 168, .35);
}

/* ── RTL ─────────────────────────────────────────────────────────────────────
 * dir="rtl" is server-resolved in the template for the AR locale (no flash race); the RTL
 * stylesheet is Tabler's own tabler.rtl.min.css. Here we only swap the font stack.
 */
[dir="rtl"] {
  --font-family: var(--font-family-ar), system-ui, sans-serif;
}