/* ============================================================
   Trio Technology — shared design tokens (2026-09-14)
   Canonical --tt-* foundation loaded FIRST by all three shells
   (admin base.html, portal customer/_base.html, landing.html).
   Existing per-shell variables are unchanged; exact duplicates
   are aliased to these tokens via var() in the shell stylesheets.
   Values where shells legitimately differ are documented, not unified.
   ============================================================ */
:root {
  /* Brand */
  --tt-brand-light: #a07c2a;   /* landing + portal (light) */
  --tt-brand-dark: #c9a44c;    /* portal dark */
  /* The admin shell's colours live in admin_tokens.css (the one admin palette,
     admin redesign R2); these two names read it there. */
  --tt-brand-admin: var(--your-move);
  --tt-brand-accent: var(--your-move-bg);

  /* Neutral slate scale (shared by admin shell & light themes) */
  --tt-slate-50: #f8fafc;
  --tt-slate-100: #f1f5f9;
  --tt-slate-200: #e2e8f0;
  --tt-slate-300: #cbd5e1;
  --tt-slate-400: #94a3b8;
  --tt-slate-500: #64748b;
  --tt-slate-600: #475569;
  --tt-slate-700: #334155;
  --tt-slate-800: #1e293b;
  --tt-slate-900: #0f172a;

  /* Status */
  --tt-danger: #dc2626;
  --tt-success: #16a34a;
  --tt-info: #0284c7;
  --tt-warning: #d97706;

  /* Typography */
  --tt-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tt-font-ar: 'Tajawal', var(--tt-font-sans);
  --tt-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

  /* Spacing scale */
  --tt-space-1: 4px;
  --tt-space-2: 8px;
  --tt-space-3: 12px;
  --tt-space-4: 16px;
  --tt-space-5: 20px;
  --tt-space-6: 24px;

  /* Radii (per-shell scales documented: admin uses 6/10/14, portal 8/12/16) */
  --tt-radius-sm: 8px;
  --tt-radius-md: 12px;
  --tt-radius-lg: 16px;
  --tt-radius-pill: 999px;

  /* Elevation */
  --tt-shadow-sm: 0 1px 3px rgba(2, 6, 23, .08);
  --tt-shadow-md: 0 6px 20px -8px rgba(2, 6, 23, .2);
  --tt-shadow-lg: 0 14px 34px -18px rgba(2, 6, 23, .35);
}

/* ============================================================
   Shared bidi utilities (checkup 2026-10-02) — every shell that
   loads this file (admin, portal, landing, public/legal pages).
   ============================================================ */

/* UX-12: a text arrow meaning "back" (←) or "forward" (→). ← and → are not
   mirrored by the browser in Arabic, so the arrow lives in its own element,
   outside the translated text, and is flipped here: in RTL "back" points
   right. (‹ › « » need nothing — Unicode mirrors those automatically, and a
   scaleX(-1) on them flips them back the wrong way.) */
[dir="rtl"] .dir-arrow { display: inline-block; transform: scaleX(-1); }

/* UX-13: values that always read left to right — phone numbers, e-mail and
   web addresses, IBAN / SWIFT. Phone fields were type="text" and inherited
   RTL, so "+965 5555 1234" displayed as "1234 5555 965+". Same list as
   LTR_FIELDS in i18n.js (which also sets dir="ltr" once scripts run); in an
   Arabic page the field still lines up with its neighbours on the right. */
input[type="tel"], input[inputmode="tel"], input[autocomplete~="tel"],
input[name="phone"], input[name$="_phone"], input[name="mobile"], input[name$="_mobile"],
input[name="whatsapp"], input[name$="_whatsapp"],
input[type="email"], input[name="email"], input[name$="_email"], input[type="url"],
input[name="iban"], input[name$="_iban"], input[name="swift"], input[name="swift_code"] {
  direction: ltr;
}
[dir="rtl"] input[type="tel"], [dir="rtl"] input[inputmode="tel"], [dir="rtl"] input[autocomplete~="tel"],
[dir="rtl"] input[name="phone"], [dir="rtl"] input[name$="_phone"], [dir="rtl"] input[name="mobile"],
[dir="rtl"] input[name$="_mobile"], [dir="rtl"] input[name="whatsapp"], [dir="rtl"] input[name$="_whatsapp"],
[dir="rtl"] input[type="email"], [dir="rtl"] input[name="email"], [dir="rtl"] input[name$="_email"],
[dir="rtl"] input[type="url"], [dir="rtl"] input[name="iban"], [dir="rtl"] input[name$="_iban"],
[dir="rtl"] input[name="swift"], [dir="rtl"] input[name="swift_code"] {
  text-align: right;
}
/* A displayed phone number, e-mail or account number: <span class="tel">…</span>
   (or <bdi dir="ltr">) keeps its digit groups in order inside Arabic text. */
.tel { direction: ltr; unicode-bidi: isolate; }