/* وثيق | WATHEEQ — Design tokens (shared by the user app and the Admin Portal)
   Brand palette: Navy #0D1B3D · Teal #1FA285 · Gold #D4A85A · Mint #E8F3EF · Gray #F2F4F7 */

:root {
  --navy: #0D1B3D;
  --teal: #1FA285;
  --gold: #D4A85A;
  --mint: #E8F3EF;
  --gray: #F2F4F7;
  --white: #FFFFFF;

  --font: "Tajawal", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Light Mode */
  --bg: var(--white);
  --bg-elev: var(--white);
  --surface: var(--gray);
  --surface-2: var(--mint);
  --card: var(--white);
  --border: #E4E8EF;
  --border-strong: #CBD2DE;
  --text: var(--navy);
  --text-2: #4F5A73;
  --text-3: #8A93A8;
  --primary: var(--navy);
  --primary-contrast: var(--white);
  --accent: var(--teal);
  --accent-soft: #D9F0E8;
  --accent-contrast: var(--white);
  --gold-soft: #F7EBD3;
  --gold-text: #8A6420;
  --danger: #C94A4A;
  --danger-soft: #FBE4E4;
  --warning: #C77D1A;
  --warning-soft: #FCEFD8;
  --info: #2F5FA8;
  --info-soft: #DFE9F8;
  --shadow: 0 1px 2px rgba(13, 27, 61, .05), 0 4px 14px rgba(13, 27, 61, .05);
  --shadow-lg: 0 8px 32px rgba(13, 27, 61, .12);
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;
  --logo-bg: var(--white);
  color-scheme: light;
}

[data-theme="dark"] {
  /* Dark Mode — an independent palette derived from the navy, not an inversion */
  --bg: #0A1430;
  --bg-elev: #0F1C3F;
  --surface: #14244B;
  --surface-2: #17305A;
  --card: #122043;
  --border: #22345F;
  --border-strong: #31477A;
  --text: #F2F4F7;
  --text-2: #B7C1D8;
  --text-3: #7F8CAA;
  --primary: var(--teal);
  --primary-contrast: var(--white);
  --accent: #29B995;
  --accent-soft: #163F3A;
  --accent-contrast: var(--white);
  --gold-soft: #3B2F18;
  --gold-text: #E9C784;
  --danger: #E56B6B;
  --danger-soft: #3E1F24;
  --warning: #E9A64B;
  --warning-soft: #3D2B14;
  --info: #7FA6E8;
  --info-soft: #1C2D56;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, .45);
  --logo-bg: #122043;
  color-scheme: dark;
}

/* Status chip colors: a fixed semantic mapping used in both apps */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; line-height: 1.4; white-space: nowrap; border: 1px solid transparent; }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .85; }
.chip-WAITING_FOR_SELLER { background: var(--gold-soft); color: var(--gold-text); }
.chip-IN_PROGRESS { background: var(--accent-soft); color: var(--accent); }
.chip-SELLER_DELIVERED { background: var(--info-soft); color: var(--info); }
.chip-BUYER_NON_RECEIPT { background: var(--warning-soft); color: var(--warning); }
.chip-UNDER_REVIEW { background: var(--danger-soft); color: var(--danger); }
.chip-COMPLETED, .chip-AUTO_COMPLETED, .chip-RESOLVED_SELLER, .chip-SETTLED { background: var(--accent-soft); color: var(--accent); }
.chip-CANCELLED, .chip-AUTO_CANCELLED, .chip-EXPIRED { background: var(--surface); color: var(--text-3); border-color: var(--border); }
.chip-REFUNDED, .chip-RESOLVED_BUYER { background: var(--info-soft); color: var(--info); }
.chip-HELD { background: var(--gold-soft); color: var(--gold-text); }
.chip-FROZEN, .chip-ESCALATED { background: var(--danger-soft); color: var(--danger); }
.chip-RELEASED { background: var(--accent-soft); color: var(--accent); }
.chip-ACTIVE, .chip-SENT { background: var(--accent-soft); color: var(--accent); }
.chip-USED { background: var(--surface); color: var(--text-2); border-color: var(--border); }
.chip-PENDING, .chip-PAUSED { background: var(--warning-soft); color: var(--warning); }
.chip-ACCEPTED { background: var(--accent-soft); color: var(--accent); }
.chip-REJECTED, .chip-FAILED { background: var(--danger-soft); color: var(--danger); }
.chip-WITHDRAWN { background: var(--surface); color: var(--text-3); border-color: var(--border); }
.chip-neutral { background: var(--surface); color: var(--text-2); border-color: var(--border); }
/* Saudi Riyal glyph next to amounts */
.sar { width: 1em; height: 1em; display: inline-block; vertical-align: -.12em; }