/* ============================================================
   Banking Experience System — design tokens v2.0.0-draft
   GENERATED from tokens/tokens.json — do not edit by hand.
   Tiers: primitive -> semantic -> component (doc 06).
   Theming: semantic and component tokens reference the tier above via var()
   chains, so a brand theme overrides values once and everything cascades.
   Scheme via prefers-color-scheme / [data-theme]. Density via [data-density].
   Arabic metrics via :lang(ar). Brands: assets/themes/<id>.css.
   ============================================================ */
:root {
  --bes-gray-0: #FFFFFF;
  --bes-gray-50: #F7F8FA;
  --bes-gray-100: #EEF0F4;
  --bes-gray-200: #DDE1E8;
  --bes-gray-300: #C2C9D4;
  --bes-gray-400: #9AA4B4;
  --bes-gray-500: #717E92;
  --bes-gray-600: #55617A;
  --bes-gray-700: #3D4763;
  --bes-gray-800: #2A324B;
  --bes-gray-900: #161C2E;
  --bes-blue-50: #EFF4FF;
  --bes-blue-100: #DCE7FE;
  --bes-blue-200: #B9CFFD;
  --bes-blue-300: #8AAEF9;
  --bes-blue-400: #5A8AF2;
  --bes-blue-350: #6B96F4;
  --bes-blue-500: #3168E8;
  --bes-blue-600: #1F52C4;
  --bes-blue-700: #17408F;
  --bes-blue-800: #12305F;
  --bes-blue-900: #0C2140;
  --bes-green-50: #EDFAF3;
  --bes-green-100: #D3F2E0;
  --bes-green-200: #A5E4C2;
  --bes-green-300: #6CCD9C;
  --bes-green-400: #35B274;
  --bes-green-500: #149355;
  --bes-green-600: #0B7A45;
  --bes-green-700: #085F37;
  --bes-green-800: #06492B;
  --bes-green-900: #04331E;
  --bes-red-50: #FDF0EE;
  --bes-red-100: #FADAD5;
  --bes-red-200: #F4B4AA;
  --bes-red-300: #EA8172;
  --bes-red-400: #DC5341;
  --bes-red-500: #C43A28;
  --bes-red-600: #A82E1F;
  --bes-red-700: #832317;
  --bes-red-800: #611A11;
  --bes-red-900: #43120C;
  --bes-amber-50: #FDF6EC;
  --bes-amber-100: #FAE8CC;
  --bes-amber-200: #F3D093;
  --bes-amber-300: #E8B054;
  --bes-amber-400: #D18F1F;
  --bes-amber-500: #B27612;
  --bes-amber-600: #8F5F0E;
  --bes-amber-700: #6F4A0B;
  --bes-amber-800: #523708;
  --bes-amber-900: #392605;
  --bes-teal-50: #EBF7F8;
  --bes-teal-100: #CFEDEF;
  --bes-teal-200: #9FDADF;
  --bes-teal-300: #63BFC8;
  --bes-teal-400: #2FA1AD;
  --bes-teal-500: #17838F;
  --bes-teal-600: #0F6974;
  --bes-teal-700: #0B525B;
  --bes-teal-800: #083E45;
  --bes-teal-900: #052B30;
  --bes-purple-50: #F4F1FC;
  --bes-purple-100: #E5DFF8;
  --bes-purple-200: #CBBFF0;
  --bes-purple-300: #AA95E3;
  --bes-purple-400: #8A6ED3;
  --bes-purple-500: #6F4FBF;
  --bes-purple-600: #5A3DA0;
  --bes-purple-700: #46307C;
  --bes-purple-800: #34245C;
  --bes-purple-900: #241940;
  --bes-gold-100: #F6EBD4;
  --bes-gold-300: #DDBE7F;
  --bes-gold-500: #B8933F;
  --bes-gold-700: #8A6B25;
  --bes-dark-surface1: #10141F;
  --bes-dark-surface2: #181D2B;
  --bes-dark-surface3: #212739;
  --bes-dark-raised: #262D42;
  --bes-dark-line: #2A324B;
  --bes-dark-line2: #3D4763;
  --bes-dark-text1: #F2F4F8;
  --bes-dark-text2: #A8B1C2;
  --bes-dark-text3: #71809A;
  --bes-dark-posTint: #0B2E1E;
  --bes-dark-negTint: #361410;
  --bes-dark-warnTint: #33270A;
  --bes-dark-infoTint: #0A2A2E;
  --bes-dark-holdTint: #1F1638;
  --bes-space-2: 2px;
  --bes-space-4: 4px;
  --bes-space-8: 8px;
  --bes-space-12: 12px;
  --bes-space-16: 16px;
  --bes-space-20: 20px;
  --bes-space-24: 24px;
  --bes-space-32: 32px;
  --bes-space-40: 40px;
  --bes-space-48: 48px;
  --bes-space-64: 64px;
  --bes-space-80: 80px;
  --bes-radius-sm: 6px;
  --bes-radius-md: 10px;
  --bes-radius-lg: 16px;
  --bes-radius-full: 999px;
  --bes-size-targetMin: 44px;
  --bes-size-targetKiosk: 56px;
  --bes-font-latin: "Inter",-apple-system,"Segoe UI",Roboto,sans-serif;
  --bes-font-arabic: "Noto Sans Arabic","Segoe UI Arabic","Geeza Pro",sans-serif;
  --bes-font-stack: "Inter","Noto Sans Arabic",-apple-system,"Segoe UI",sans-serif;
  --bes-motion-instant: 80ms;
  --bes-motion-fast: 140ms;
  --bes-motion-standard: 220ms;
  --bes-motion-gentle: 320ms;
  --bes-motion-deliberate: 480ms;
  --bes-motion-easeStandard: cubic-bezier(0.2,0,0,1);
  --bes-motion-easeEnter: cubic-bezier(0,0,0,1);
  --bes-motion-easeExit: cubic-bezier(0.3,0,1,1);
  --bes-motion-spin: 700ms;
  --bes-motion-pulse: 1400ms;
  --bes-z-base: 0;
  --bes-z-raised: 10;
  --bes-z-sticky: 100;
  --bes-z-drawer: 800;
  --bes-z-modal: 900;
  --bes-z-toast: 950;
  --bes-z-critical: 1000;

  /* semantic — light (var() chains into primitives) */
  --bes-surface-primary: var(--bes-gray-0);
  --bes-surface-secondary: var(--bes-gray-50);
  --bes-surface-tertiary: var(--bes-gray-100);
  --bes-surface-raised: var(--bes-gray-0);
  --bes-surface-inverse: var(--bes-gray-900);
  --bes-text-primary: var(--bes-gray-900);
  --bes-text-secondary: var(--bes-gray-600);
  --bes-text-disabled: var(--bes-gray-400);
  --bes-text-inverse: var(--bes-gray-0);
  --bes-text-link: var(--bes-blue-600);
  --bes-text-onAction: var(--bes-gray-0);
  --bes-border-default: var(--bes-gray-200);
  --bes-border-strong: var(--bes-gray-300);
  --bes-border-focus: var(--bes-blue-500);
  --bes-border-error: var(--bes-red-600);
  --bes-border-input: var(--bes-gray-500);
  --bes-action-primary: var(--bes-blue-600);
  --bes-action-primaryHover: var(--bes-blue-700);
  --bes-action-primaryPressed: var(--bes-blue-800);
  --bes-action-destructive: var(--bes-red-600);
  --bes-status-success: var(--bes-green-600);
  --bes-status-successTint: var(--bes-green-50);
  --bes-status-warning: var(--bes-amber-600);
  --bes-status-warningTint: var(--bes-amber-50);
  --bes-status-error: var(--bes-red-600);
  --bes-status-errorTint: var(--bes-red-50);
  --bes-status-info: var(--bes-teal-600);
  --bes-status-infoTint: var(--bes-teal-50);
  --bes-status-neutral: var(--bes-gray-600);
  --bes-financial-income: var(--bes-green-600);
  --bes-financial-expense: var(--bes-gray-900);
  --bes-financial-negative: var(--bes-red-600);
  --bes-financial-reserved: var(--bes-purple-600);
  --bes-risk-low: var(--bes-green-600);
  --bes-risk-medium: var(--bes-amber-600);
  --bes-risk-high: var(--bes-red-600);
  --bes-risk-critical: var(--bes-red-700);
  --bes-chart-cat1: var(--bes-blue-600);
  --bes-chart-cat2: var(--bes-teal-600);
  --bes-chart-cat3: var(--bes-amber-600);
  --bes-chart-cat4: var(--bes-purple-600);
  --bes-chart-cat5: var(--bes-green-600);
  --bes-chart-cat6: var(--bes-red-600);
  --bes-chart-cat7: var(--bes-gray-600);
  --bes-elevation-e1: 0 1px 2px rgba(22,28,46,.08);
  --bes-elevation-e2: 0 2px 8px rgba(22,28,46,.10);
  --bes-elevation-e3: 0 8px 24px rgba(22,28,46,.14);
  --bes-elevation-overlay: rgba(22,28,46,.48);
  --bes-focus-width: 2px;
  --bes-focus-offset: 2px;
  --bes-transaction-draft: var(--bes-gray-600);
  --bes-transaction-draftTint: var(--bes-gray-100);
  --bes-transaction-review: var(--bes-gray-700);
  --bes-transaction-reviewTint: var(--bes-gray-100);
  --bes-transaction-authentication: var(--bes-blue-600);
  --bes-transaction-authenticationTint: var(--bes-blue-50);
  --bes-transaction-processing: var(--bes-teal-600);
  --bes-transaction-processingTint: var(--bes-teal-50);
  --bes-transaction-pending: var(--bes-teal-600);
  --bes-transaction-pendingTint: var(--bes-teal-50);
  --bes-transaction-completed: var(--bes-green-600);
  --bes-transaction-completedTint: var(--bes-green-50);
  --bes-transaction-failed: var(--bes-red-600);
  --bes-transaction-failedTint: var(--bes-red-50);
  --bes-transaction-unknown: var(--bes-teal-600);
  --bes-transaction-unknownTint: var(--bes-teal-50);
  --bes-transaction-blocked: var(--bes-amber-600);
  --bes-transaction-blockedTint: var(--bes-amber-50);
  --bes-transaction-reversed: var(--bes-purple-600);
  --bes-transaction-reversedTint: var(--bes-purple-50);
  --bes-transaction-refunded: var(--bes-green-600);
  --bes-transaction-refundedTint: var(--bes-green-50);
  --bes-transaction-disputed: var(--bes-purple-600);
  --bes-transaction-disputedTint: var(--bes-purple-50);
  --bes-transaction-cancelled: var(--bes-gray-600);
  --bes-transaction-cancelledTint: var(--bes-gray-100);
  --bes-verification-unverified: var(--bes-gray-600);
  --bes-verification-pending: var(--bes-teal-600);
  --bes-verification-verified: var(--bes-green-600);
  --bes-verification-failed: var(--bes-red-600);
  --bes-verification-expired: var(--bes-amber-600);
  --bes-consent-required: var(--bes-amber-600);
  --bes-consent-pending: var(--bes-teal-600);
  --bes-consent-granted: var(--bes-green-600);
  --bes-consent-expired: var(--bes-amber-600);
  --bes-consent-revoked: var(--bes-gray-600);

  /* density — standard */
  --bes-density-rowHeight: 56px;
  --bes-density-cellPad: 16px;
  --bes-density-cardPad: 20px;
  --bes-density-fieldGap: 24px;
  --bes-density-controlH: 48px;
  --bes-density-ctlPadY: 12px;
  --bes-density-ctlPadX: 20px;
  --bes-density-listPadX: 18px;

  /* type scale */
  --bes-type-display-size: 40px;
  --bes-type-display-line: 48px;
  --bes-type-display-weight: 700;
  --bes-type-h1-size: 32px;
  --bes-type-h1-line: 40px;
  --bes-type-h1-weight: 700;
  --bes-type-h2-size: 24px;
  --bes-type-h2-line: 32px;
  --bes-type-h2-weight: 600;
  --bes-type-h3-size: 20px;
  --bes-type-h3-line: 28px;
  --bes-type-h3-weight: 600;
  --bes-type-bodyLg-size: 18px;
  --bes-type-bodyLg-line: 28px;
  --bes-type-bodyLg-weight: 400;
  --bes-type-body-size: 16px;
  --bes-type-body-line: 24px;
  --bes-type-body-weight: 400;
  --bes-type-bodyMd-size: 15px;
  --bes-type-bodyMd-line: 22px;
  --bes-type-bodyMd-weight: 400;
  --bes-type-bodySm-size: 14px;
  --bes-type-bodySm-line: 20px;
  --bes-type-bodySm-weight: 400;
  --bes-type-bodyXs-size: 13px;
  --bes-type-bodyXs-line: 18px;
  --bes-type-bodyXs-weight: 400;
  --bes-type-label-size: 14px;
  --bes-type-label-line: 20px;
  --bes-type-label-weight: 500;
  --bes-type-caption-size: 12px;
  --bes-type-caption-line: 16px;
  --bes-type-caption-weight: 400;
  --bes-type-micro-size: 11px;
  --bes-type-micro-line: 14px;
  --bes-type-micro-weight: 500;
  --bes-type-amountHero-size: 40px;
  --bes-type-amountHero-line: 48px;
  --bes-type-amountHero-weight: 700;
  --bes-type-amountLg-size: 28px;
  --bes-type-amountLg-line: 36px;
  --bes-type-amountLg-weight: 700;
  --bes-type-amountMd-size: 20px;
  --bes-type-amountMd-line: 28px;
  --bes-type-amountMd-weight: 600;
  --bes-type-amountSm-size: 16px;
  --bes-type-amountSm-line: 24px;
  --bes-type-amountSm-weight: 600;
  --bes-type-amountMeta-size: 13px;
  --bes-type-amountMeta-line: 16px;
  --bes-type-amountMeta-weight: 500;

  /* component tier — brand-overridable, scoped to one component each */
  --bes-app-fontFamily: var(--bes-font-stack);
  --bes-app-fontFamilyArabic: var(--bes-font-arabic);
  --bes-button-radius: var(--bes-radius-md);
  --bes-button-weight: 600;
  --bes-button-fontSize: var(--bes-type-bodyMd-size);
  --bes-button-smFontSize: var(--bes-type-bodyXs-size);
  --bes-button-lgFontSize: var(--bes-type-body-size);
  --bes-control-radius: var(--bes-radius-sm);
  --bes-control-fontSize: var(--bes-type-body-size);
  --bes-card-radius: var(--bes-radius-lg);
  --bes-modal-radius: var(--bes-radius-lg);
  --bes-badge-radius: var(--bes-radius-full);
  --bes-chip-radius: var(--bes-radius-full);
  --bes-seg-radius: 8px;
  --bes-dot-radius: 50%;
  --bes-chart-swatchRadius: 3px;
  --bes-risk-barRadius: 4px;
  --bes-cardArt-inlineSize: 320px;
  --bes-cardArt-radius: 14px;
  --bes-cardArt-pad: 18px;
  --bes-cardArt-from: var(--bes-gray-800);
  --bes-cardArt-to: var(--bes-gray-900);
  --bes-cardArt-ink: var(--bes-gray-0);
  --bes-cardArt-badgeBg: rgba(255,255,255,.18);
  --bes-cardArt-badgeRadius: 4px;
  --bes-cardArt-track: .12em;
  --bes-cardArt-trackWide: .06em;
  --bes-cardArt-frozenBg: rgba(180,200,230,.25);
  --bes-spinner-duration: var(--bes-motion-spin);
  --bes-skeleton-duration: var(--bes-motion-pulse);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bes-surface-primary: var(--bes-dark-surface1);
    --bes-surface-secondary: var(--bes-dark-surface2);
    --bes-surface-tertiary: var(--bes-dark-surface3);
    --bes-surface-raised: var(--bes-dark-raised);
    --bes-surface-inverse: var(--bes-dark-raised);
    --bes-text-primary: var(--bes-dark-text1);
    --bes-text-secondary: var(--bes-dark-text2);
    --bes-text-disabled: var(--bes-dark-text3);
    --bes-text-inverse: var(--bes-gray-900);
    --bes-text-link: var(--bes-blue-350);
    --bes-text-onAction: var(--bes-blue-900);
    --bes-border-default: var(--bes-dark-line);
    --bes-border-strong: var(--bes-dark-line2);
    --bes-border-focus: var(--bes-blue-300);
    --bes-border-error: var(--bes-red-300);
    --bes-border-input: #8A94A8;
    --bes-action-primary: var(--bes-blue-350);
    --bes-action-primaryHover: var(--bes-blue-300);
    --bes-action-primaryPressed: var(--bes-blue-200);
    --bes-action-destructive: var(--bes-red-300);
    --bes-status-success: var(--bes-green-300);
    --bes-status-successTint: var(--bes-dark-posTint);
    --bes-status-warning: var(--bes-amber-300);
    --bes-status-warningTint: var(--bes-dark-warnTint);
    --bes-status-error: var(--bes-red-300);
    --bes-status-errorTint: var(--bes-dark-negTint);
    --bes-status-info: var(--bes-teal-300);
    --bes-status-infoTint: var(--bes-dark-infoTint);
    --bes-status-neutral: var(--bes-dark-text2);
    --bes-financial-income: var(--bes-green-300);
    --bes-financial-expense: var(--bes-dark-text1);
    --bes-financial-negative: var(--bes-red-300);
    --bes-financial-reserved: var(--bes-purple-300);
    --bes-risk-low: var(--bes-green-300);
    --bes-risk-medium: var(--bes-amber-300);
    --bes-risk-high: var(--bes-red-300);
    --bes-risk-critical: var(--bes-red-200);
    --bes-chart-cat1: var(--bes-blue-300);
    --bes-chart-cat2: var(--bes-teal-300);
    --bes-chart-cat3: var(--bes-amber-300);
    --bes-chart-cat4: var(--bes-purple-300);
    --bes-chart-cat5: var(--bes-green-300);
    --bes-chart-cat6: var(--bes-red-300);
    --bes-chart-cat7: var(--bes-gray-400);
    --bes-elevation-e1: none;
    --bes-elevation-e2: none;
    --bes-elevation-e3: none;
    --bes-elevation-overlay: rgba(0,0,0,.6);
    --bes-focus-width: 2px;
    --bes-focus-offset: 2px;
    --bes-transaction-draft: var(--bes-dark-text2);
    --bes-transaction-draftTint: var(--bes-dark-surface3);
    --bes-transaction-review: var(--bes-dark-text1);
    --bes-transaction-reviewTint: var(--bes-dark-surface3);
    --bes-transaction-authentication: var(--bes-blue-350);
    --bes-transaction-authenticationTint: var(--bes-dark-surface2);
    --bes-transaction-processing: var(--bes-teal-300);
    --bes-transaction-processingTint: var(--bes-dark-infoTint);
    --bes-transaction-pending: var(--bes-teal-300);
    --bes-transaction-pendingTint: var(--bes-dark-infoTint);
    --bes-transaction-completed: var(--bes-green-300);
    --bes-transaction-completedTint: var(--bes-dark-posTint);
    --bes-transaction-failed: var(--bes-red-300);
    --bes-transaction-failedTint: var(--bes-dark-negTint);
    --bes-transaction-unknown: var(--bes-teal-300);
    --bes-transaction-unknownTint: var(--bes-dark-infoTint);
    --bes-transaction-blocked: var(--bes-amber-300);
    --bes-transaction-blockedTint: var(--bes-dark-warnTint);
    --bes-transaction-reversed: var(--bes-purple-300);
    --bes-transaction-reversedTint: var(--bes-dark-holdTint);
    --bes-transaction-refunded: var(--bes-green-300);
    --bes-transaction-refundedTint: var(--bes-dark-posTint);
    --bes-transaction-disputed: var(--bes-purple-300);
    --bes-transaction-disputedTint: var(--bes-dark-holdTint);
    --bes-transaction-cancelled: var(--bes-dark-text2);
    --bes-transaction-cancelledTint: var(--bes-dark-surface3);
    --bes-verification-unverified: var(--bes-dark-text2);
    --bes-verification-pending: var(--bes-teal-300);
    --bes-verification-verified: var(--bes-green-300);
    --bes-verification-failed: var(--bes-red-300);
    --bes-verification-expired: var(--bes-amber-300);
    --bes-consent-required: var(--bes-amber-300);
    --bes-consent-pending: var(--bes-teal-300);
    --bes-consent-granted: var(--bes-green-300);
    --bes-consent-expired: var(--bes-amber-300);
    --bes-consent-revoked: var(--bes-dark-text2);
  }
}
:root[data-theme="dark"] {
  --bes-surface-primary: var(--bes-dark-surface1);
  --bes-surface-secondary: var(--bes-dark-surface2);
  --bes-surface-tertiary: var(--bes-dark-surface3);
  --bes-surface-raised: var(--bes-dark-raised);
  --bes-surface-inverse: var(--bes-dark-raised);
  --bes-text-primary: var(--bes-dark-text1);
  --bes-text-secondary: var(--bes-dark-text2);
  --bes-text-disabled: var(--bes-dark-text3);
  --bes-text-inverse: var(--bes-gray-900);
  --bes-text-link: var(--bes-blue-350);
  --bes-text-onAction: var(--bes-blue-900);
  --bes-border-default: var(--bes-dark-line);
  --bes-border-strong: var(--bes-dark-line2);
  --bes-border-focus: var(--bes-blue-300);
  --bes-border-error: var(--bes-red-300);
  --bes-border-input: #8A94A8;
  --bes-action-primary: var(--bes-blue-350);
  --bes-action-primaryHover: var(--bes-blue-300);
  --bes-action-primaryPressed: var(--bes-blue-200);
  --bes-action-destructive: var(--bes-red-300);
  --bes-status-success: var(--bes-green-300);
  --bes-status-successTint: var(--bes-dark-posTint);
  --bes-status-warning: var(--bes-amber-300);
  --bes-status-warningTint: var(--bes-dark-warnTint);
  --bes-status-error: var(--bes-red-300);
  --bes-status-errorTint: var(--bes-dark-negTint);
  --bes-status-info: var(--bes-teal-300);
  --bes-status-infoTint: var(--bes-dark-infoTint);
  --bes-status-neutral: var(--bes-dark-text2);
  --bes-financial-income: var(--bes-green-300);
  --bes-financial-expense: var(--bes-dark-text1);
  --bes-financial-negative: var(--bes-red-300);
  --bes-financial-reserved: var(--bes-purple-300);
  --bes-risk-low: var(--bes-green-300);
  --bes-risk-medium: var(--bes-amber-300);
  --bes-risk-high: var(--bes-red-300);
  --bes-risk-critical: var(--bes-red-200);
  --bes-chart-cat1: var(--bes-blue-300);
  --bes-chart-cat2: var(--bes-teal-300);
  --bes-chart-cat3: var(--bes-amber-300);
  --bes-chart-cat4: var(--bes-purple-300);
  --bes-chart-cat5: var(--bes-green-300);
  --bes-chart-cat6: var(--bes-red-300);
  --bes-chart-cat7: var(--bes-gray-400);
  --bes-elevation-e1: none;
  --bes-elevation-e2: none;
  --bes-elevation-e3: none;
  --bes-elevation-overlay: rgba(0,0,0,.6);
  --bes-focus-width: 2px;
  --bes-focus-offset: 2px;
  --bes-transaction-draft: var(--bes-dark-text2);
  --bes-transaction-draftTint: var(--bes-dark-surface3);
  --bes-transaction-review: var(--bes-dark-text1);
  --bes-transaction-reviewTint: var(--bes-dark-surface3);
  --bes-transaction-authentication: var(--bes-blue-350);
  --bes-transaction-authenticationTint: var(--bes-dark-surface2);
  --bes-transaction-processing: var(--bes-teal-300);
  --bes-transaction-processingTint: var(--bes-dark-infoTint);
  --bes-transaction-pending: var(--bes-teal-300);
  --bes-transaction-pendingTint: var(--bes-dark-infoTint);
  --bes-transaction-completed: var(--bes-green-300);
  --bes-transaction-completedTint: var(--bes-dark-posTint);
  --bes-transaction-failed: var(--bes-red-300);
  --bes-transaction-failedTint: var(--bes-dark-negTint);
  --bes-transaction-unknown: var(--bes-teal-300);
  --bes-transaction-unknownTint: var(--bes-dark-infoTint);
  --bes-transaction-blocked: var(--bes-amber-300);
  --bes-transaction-blockedTint: var(--bes-dark-warnTint);
  --bes-transaction-reversed: var(--bes-purple-300);
  --bes-transaction-reversedTint: var(--bes-dark-holdTint);
  --bes-transaction-refunded: var(--bes-green-300);
  --bes-transaction-refundedTint: var(--bes-dark-posTint);
  --bes-transaction-disputed: var(--bes-purple-300);
  --bes-transaction-disputedTint: var(--bes-dark-holdTint);
  --bes-transaction-cancelled: var(--bes-dark-text2);
  --bes-transaction-cancelledTint: var(--bes-dark-surface3);
  --bes-verification-unverified: var(--bes-dark-text2);
  --bes-verification-pending: var(--bes-teal-300);
  --bes-verification-verified: var(--bes-green-300);
  --bes-verification-failed: var(--bes-red-300);
  --bes-verification-expired: var(--bes-amber-300);
  --bes-consent-required: var(--bes-amber-300);
  --bes-consent-pending: var(--bes-teal-300);
  --bes-consent-granted: var(--bes-green-300);
  --bes-consent-expired: var(--bes-amber-300);
  --bes-consent-revoked: var(--bes-dark-text2);
}

:root[data-density="comfortable"] {
  --bes-density-rowHeight: 64px;
  --bes-density-cellPad: 20px;
  --bes-density-cardPad: 24px;
  --bes-density-fieldGap: 28px;
  --bes-density-controlH: 52px;
  --bes-density-ctlPadY: 14px;
  --bes-density-ctlPadX: 24px;
  --bes-density-listPadX: 20px;
}
:root[data-density="compact"] {
  --bes-density-rowHeight: 44px;
  --bes-density-cellPad: 12px;
  --bes-density-cardPad: 16px;
  --bes-density-fieldGap: 20px;
  --bes-density-controlH: 40px;
  --bes-density-ctlPadY: 8px;
  --bes-density-ctlPadX: 14px;
  --bes-density-listPadX: 14px;
}

/* Arabic optical metrics (doc 02 §2) */
:lang(ar) {
  --bes-type-display-size: 41px;
  --bes-type-display-line: 50px;
  --bes-type-h1-size: 33px;
  --bes-type-h1-line: 42px;
  --bes-type-h2-size: 25px;
  --bes-type-h2-line: 34px;
  --bes-type-h3-size: 21px;
  --bes-type-h3-line: 30px;
  --bes-type-bodyLg-size: 19px;
  --bes-type-bodyLg-line: 30px;
  --bes-type-body-size: 17px;
  --bes-type-body-line: 26px;
  --bes-type-bodyMd-size: 16px;
  --bes-type-bodyMd-line: 24px;
  --bes-type-bodySm-size: 15px;
  --bes-type-bodySm-line: 22px;
  --bes-type-bodyXs-size: 14px;
  --bes-type-bodyXs-line: 20px;
  --bes-type-label-size: 15px;
  --bes-type-label-line: 22px;
  --bes-type-caption-size: 13px;
  --bes-type-caption-line: 18px;
  --bes-type-micro-size: 12px;
  --bes-type-micro-line: 16px;

  /* Latin tracking breaks Arabic cursive joining — the component token is the
     override point, so no rule has to win a specificity fight to undo it. */
  --bes-cardArt-track: 0;
  --bes-cardArt-trackWide: 0;
}