/* ============================================================
   Business Presence+  ·  حضور الأعمال+
   Web Platform Design Tokens · v1.0 · built on Mark A "The Crossroads"
   ------------------------------------------------------------
   Rules encoded here:
   · Navy is structure. Orange is the merchant's record and the
     primary action — nothing else. One orange element per view region.
   · ND Red #DC2027, Steel Blue #078BA4 and the NA gradient are
     RESERVED for the National Address parent brand. Never used in UI.
   · Flat: no gradients on brand elements. Elevation via shadow only.
   ============================================================ */

:root {
  /* ---------- Brand core ---------- */
  --bp-navy:   #222753;   /* structure, text, chrome        */
  --bp-orange: #EA6A1F;   /* the record, the primary action */

  /* ---------- Navy ramp ---------- */
  --bp-navy-50:  #F4F4F6;
  --bp-navy-100: #E4E5EA;
  --bp-navy-200: #C8C9D4;
  --bp-navy-300: #9C9EB2;
  --bp-navy-400: #646887;
  --bp-navy-500: #222753;
  --bp-navy-600: #1D2147;
  --bp-navy-700: #181B3A;
  --bp-navy-800: #13152E;
  --bp-navy-900: #0E1021;

  /* ---------- Orange ramp ---------- */
  --bp-orange-50:  #FEF8F4;
  --bp-orange-100: #FCEDE4;
  --bp-orange-200: #FADAC7;
  --bp-orange-300: #F6BC9A;
  --bp-orange-400: #F09762;
  --bp-orange-500: #EA6A1F;
  --bp-orange-600: #C75A1A;   /* hover on primary actions  */
  --bp-orange-700: #A44A16;   /* pressed                   */
  --bp-orange-800: #813A11;
  --bp-orange-900: #5E2A0C;

  /* ---------- Neutrals ("the streets") ---------- */
  --bp-white:    #FFFFFF;
  --bp-street:   #F4F4F8;   /* app background            */
  --bp-line:     #E4E4EC;   /* borders, dividers          */
  --bp-ink:      #1A1A2E;   /* body text on light         */
  --bp-ink-2:    #55586E;   /* secondary text             */
  --bp-ink-3:    #8B8EA3;   /* placeholder, captions      */

  /* ---------- Semantic (functional only, never brand) ---------- */
  --bp-success:      #1E8E5A;
  --bp-success-bg:   #E7F5EE;
  --bp-warning:      #B97D10;
  --bp-warning-bg:   #FBF3E2;
  --bp-danger:       #C0392B;   /* deliberately NOT ND Red #DC2027 */
  --bp-danger-bg:    #FAEBE8;
  --bp-info:         #2E5AAC;
  --bp-info-bg:      #EAF0FA;

  /* ---------- Verification (product-specific) ---------- */
  --bp-verified:     var(--bp-navy-500);
  --bp-verified-bg:  var(--bp-navy-50);

  /* ---------- Data-viz sequence ---------- */
  --bp-viz-1: #222753;
  --bp-viz-2: #EA6A1F;
  --bp-viz-3: #646887;
  --bp-viz-4: #F09762;
  --bp-viz-5: #9C9EB2;
  --bp-viz-6: #FADAC7;

  /* ---------- Typography ---------- */
  /* Licensed: URW Geometric + URW Geometric Arabic.
     Stack falls back to metric-compatible geometrics. */
  --bp-font: 'URW Geometric', 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --bp-font-ar: 'URW Geometric Arabic', 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif;

  --bp-text-display: 700 2.75rem/1.15 var(--bp-font);  /* 44 */
  --bp-text-h1:      700 2rem/1.2   var(--bp-font);    /* 32 */
  --bp-text-h2:      600 1.5rem/1.3 var(--bp-font);    /* 24 */
  --bp-text-h3:      600 1.25rem/1.35 var(--bp-font);  /* 20 */
  --bp-text-body:    400 1rem/1.55 var(--bp-font);     /* 16 */
  --bp-text-body-md: 500 1rem/1.55 var(--bp-font);
  --bp-text-small:   400 0.875rem/1.5 var(--bp-font);  /* 14 */
  --bp-text-caption: 400 0.75rem/1.4 var(--bp-font);   /* 12 */

  /* ---------- Spacing (4px scale) ---------- */
  --bp-sp-1: 4px;   --bp-sp-2: 8px;   --bp-sp-3: 12px;
  --bp-sp-4: 16px;  --bp-sp-5: 20px;  --bp-sp-6: 24px;
  --bp-sp-8: 32px;  --bp-sp-10: 40px; --bp-sp-12: 48px;
  --bp-sp-16: 64px;

  /* ---------- Radius (from the mark's geometry) ---------- */
  --bp-r-sm: 6px;    /* chips, inputs inner   */
  --bp-r-md: 10px;   /* buttons, inputs       */
  --bp-r-lg: 14px;   /* cards                 */
  --bp-r-xl: 20px;   /* modals, hero panels   */
  --bp-r-full: 999px;

  /* ---------- Elevation (flat brand — shadows stay soft) ---------- */
  --bp-sh-1: 0 1px 2px rgba(34,39,83,.06);
  --bp-sh-2: 0 2px 8px rgba(34,39,83,.08);
  --bp-sh-3: 0 8px 24px rgba(34,39,83,.12);

  /* ---------- Borders & focus ---------- */
  --bp-border: 1px solid var(--bp-line);
  --bp-focus-ring: 0 0 0 3px var(--bp-orange-200);

  /* ---------- Motion ---------- */
  --bp-ease: cubic-bezier(.22,.8,.36,1);
  --bp-t-fast: 120ms;
  --bp-t-base: 200ms;
  --bp-t-slow: 320ms;

  /* ---------- Layout ---------- */
  --bp-container: 1200px;
  --bp-sidebar: 264px;
  --bp-topbar: 64px;
}

/* ---------- RTL: the platform is Arabic-first ---------- */
/* Author all layout with logical properties (margin-inline-start,
   padding-inline-end, inset-inline, text-align: start). Set dir="rtl"
   on <html> by default; dir="ltr" is the exception. Numerals in data
   tables remain Latin digits for alignment. */

/* ---------- Component primitives ---------- */
.bp-btn {
  font: var(--bp-text-body-md); border: none; cursor: pointer;
  border-radius: var(--bp-r-md); padding: 10px 20px;
  transition: background var(--bp-t-fast) var(--bp-ease),
              box-shadow var(--bp-t-fast) var(--bp-ease);
}
.bp-btn:focus-visible { outline: none; box-shadow: var(--bp-focus-ring); }
.bp-btn--primary   { background: var(--bp-orange-500); color: #fff; }
.bp-btn--primary:hover  { background: var(--bp-orange-600); }
.bp-btn--primary:active { background: var(--bp-orange-700); }
.bp-btn--secondary { background: var(--bp-navy-500); color: #fff; }
.bp-btn--secondary:hover { background: var(--bp-navy-600); }
/* Ghost sits on the page surface, so its label must flip with the theme —
   navy-500 is the structural GROUND colour and stays dark in both. */
.bp-btn--ghost { background: transparent; color: var(--bp-heading);
                 box-shadow: inset 0 0 0 1.5px var(--bp-navy-200); }
.bp-btn--ghost:hover { background: var(--bp-navy-50); }
.bp-btn:disabled { background: var(--bp-navy-100); color: var(--bp-ink-3); cursor: not-allowed; }

.bp-input {
  font: var(--bp-text-body); color: var(--bp-ink);
  border: 1.5px solid var(--bp-line); border-radius: var(--bp-r-md);
  padding: 10px 14px; background: var(--bp-surface); width: 100%;
  transition: border-color var(--bp-t-fast), box-shadow var(--bp-t-fast);
}
.bp-input::placeholder { color: var(--bp-ink-3); }
.bp-input:focus { outline: none; border-color: var(--bp-orange-500);
                  box-shadow: var(--bp-focus-ring); }
.bp-input--error { border-color: var(--bp-danger); }

.bp-card {
  background: var(--bp-surface); border: var(--bp-border);
  border-radius: var(--bp-r-lg); box-shadow: var(--bp-sh-1);
  padding: var(--bp-sp-6);
}

.bp-badge {
  font: var(--bp-text-caption); font-weight: 600;
  padding: 3px 10px; border-radius: var(--bp-r-full);
  display: inline-flex; align-items: center; gap: 6px;
}
.bp-badge--verified { background: var(--bp-verified-bg); color: var(--bp-verified); }
.bp-badge--live     { background: var(--bp-success-bg);  color: var(--bp-success); }
.bp-badge--pending  { background: var(--bp-warning-bg);  color: var(--bp-warning); }
.bp-badge--issue    { background: var(--bp-danger-bg);   color: var(--bp-danger); }