:root {
  /* ══════════════════════════════════════════════════════════════════
     Wasla v2 brand token layer (Cycle 17 — re-skin foundation)
     Authoritative spec: Docs/design/brand_identity_v2.md
     Navy #1D3A5E anchor · electric-blue #0557E7 action · gold #D4AF36.
     RTL parity: token VALUES are identical to wasla-ltr.css — all
     navy/blue/gold values are direction-agnostic (brand_identity_v2.md §8).
     Only the typographic optical adjustments below differ for Arabic.
     ══════════════════════════════════════════════════════════════════ */

  /* ── v2 brand core (brand_identity_v2.md §2.1) ── */
  --wasla-navy: #1D3A5E;        /* THE brand colour: hero, nav, bands, footer */
  --wasla-navy-deep: #152C49;   /* darker navy: gradients, hover-darkening */
  --wasla-navy-700: #2C4F78;    /* mid navy: secondary nav, less-prominent fills */
  --wasla-blue: #0557E7;        /* THE primary action colour (replaces #1F4FD8) */
  --wasla-blue-hover: #0246C4;  /* primary-button hover/active */
  --wasla-gold: #D4AF36;        /* signature accent — use sparingly */
  --wasla-gold-soft: #F2E6BE;   /* gold tint: badge backgrounds */

  /* ── v2 functional / state (§2.2) ── */
  --wasla-success: #1F9D6B;          /* verified badges, success ticks */
  --wasla-success-soft: #E4F5EE;     /* success card backgrounds */
  --wasla-ai-tint: #E5ECFC;          /* AI suggestion cards, info panels */
  --wasla-ai-tint-strong: #D5E1FB;   /* AI card borders / accent strips */
  --wasla-warning: #E0922A;          /* warnings, "needs attention" */
  --wasla-danger: #DA3B3B;           /* errors, destructive actions */

  /* ── v2 neutrals (§2.3) ── */
  --wasla-ink: #1D3A5E;          /* primary text on light surfaces (= navy) */
  --wasla-body: #56606F;         /* body copy, secondary text */
  --wasla-muted: #8A93A1;        /* captions, placeholders, disabled */
  --wasla-line: #E4E7EC;         /* borders, dividers, card outlines */
  --wasla-surface: #FFFFFF;      /* cards, panels, inputs */
  --wasla-canvas: #F4F6F9;       /* page background behind cards */
  --wasla-canvas-navy: #1D3A5E;  /* navy page sections (hero, bands, footer) */

  /* ── Brand palette (legacy variable NAMES kept; values pivoted to v2) ── */
  --brand-primary: #0557E7;        /* C17: pivoted from #1F4FD8 → v2 electric blue */
  --brand-hover: #0246C4;          /* C17: pivoted from #1A43B8 → v2 blue-hover */
  --brand-light: #E5ECFC;          /* C17: re-toned to the v2 AI/blue tint */
  --brand-secondary: #56606F;      /* C17: re-toned to v2 --wasla-body */
  --brand-accent: #D4AF36;         /* C17: legacy orange #F28C28 retired → v2 gold */
  --brand-font: "IBM Plex Sans Arabic", "DIN Next LT Arabic", "Cairo", "Segoe UI", system-ui, sans-serif;

  /* Bootstrap theming — pivot --bs-primary so Bootstrap components
     inherit the v2 electric blue. */
  --bs-primary: #0557E7;
  --bs-primary-rgb: 5, 87, 231;

  /* ── Radius tokens ──
     Note: --radius-lg is owned by static/css/tokens.css (14px) which
     loads AFTER this file; do not redeclare it here (was dead code). */
  --radius-sm: 6px;
  --radius-md: 10px;

  /* ── Shadows ── */
  --wasla-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 6px 16px rgba(0, 0, 0, 0.04);

  /* ── Legacy aliases (kept so existing CSS does not break) ── */
  --wasla-ai-accent: #0557E7;        /* C17: AI shares the primary blue (§2.2) */
  --wasla-success-tint: #E4F5EE;     /* C17: alias of --wasla-success-soft */
}

body.wasla-body {
  font-family: var(--brand-font);
  color: var(--wasla-ink);
  background-color: var(--wasla-canvas);
  font-size: 0.9375rem;  /* 15px — Arabic needs +1px for optical balance */
  line-height: 1.7;
}

.card {
  border-radius: var(--radius-md);
  box-shadow: var(--wasla-shadow);
  border: 1px solid var(--wasla-line);
}

.btn,
.form-control,
.form-select,
.badge {
  border-radius: var(--radius-sm);
}

.btn {
  padding: 0.55rem 1rem;
  font-weight: 500;
}

.btn-primary {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--brand-hover);
  border-color: var(--brand-hover);
}

.btn-outline-primary {
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}

.form-control,
.form-select {
  padding: 0.6rem 0.9rem;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(5, 87, 231, 0.15);  /* C17: v2 electric-blue focus ring */
}

.wasla-logo {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.sidebar .nav-link {
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--wasla-ink);
  font-size: 0.9375rem;  /* slightly larger for Arabic */
  transition: background 0.15s, color 0.15s;
}

.sidebar .nav-link:hover {
  background: rgba(5, 87, 231, 0.08);  /* C17: v2 electric-blue tint */
  color: var(--brand-hover);
}

.sidebar .nav-link.active {
  background: rgba(5, 87, 231, 0.12);  /* C17: v2 electric-blue tint */
  color: var(--brand-hover);
  font-weight: 600;
}

/* ── Arabic typography adjustments ── */
h1, .h1 { font-size: 1.625rem; }
h2, .h2 { font-size: 1.375rem; }
h3, .h3 { font-size: 1.1875rem; }
h4, .h4 { font-size: 1.0625rem; }

.wasla-card-button {
  cursor: pointer;
}

.brand-navbar {
  background-color: var(--brand-primary);
}

.brand-text-primary {
  color: var(--brand-primary);
}