/* ==========================================================================
   شركة شمال أفريقيا للنقل البحري والبري — design tokens
   Standalone identity. Palette anchored on the company logo (#1863AC, #767E84)
   with a warm accent lifted from the fleet's own hull oxide.
   ========================================================================== */

:root {
  /* --- core palette ------------------------------------------------------ */
  --navy:       #0E2A47;  /* deep sea — dark sections, hero ground           */
  --blue:       #1863AC;  /* LOGO blue — primary, CTAs, links (on light)     */
  --blue-lift:  #5B9BD5;  /* accent on DARK only — see contrast note below   */
  --blue-pale:  #CBDCEB;  /* fills, rails, quiet panels                      */
  --bone:       #F5F3EF;  /* page ground — the bulk-bag white                */
  --ink:        #14171A;  /* body text                                       */
  --steel:      #767E84;  /* LOGO grey — secondary text, metadata            */
  --oxide:      #B4553C;  /* hull rust — the single warm accent              */

  /* --- derived ----------------------------------------------------------- */
  --bone-deep:  #EAE7E1;
  --navy-raise: #16375A;  /* raised surfaces on dark (cards, wells)          */
  --line:       rgba(20, 23, 26, .14);
  --line-firm:  rgba(20, 23, 26, .28);
  --line-invert: rgba(245, 243, 239, .22);

  /* --- type -------------------------------------------------------------- */
  --arabic: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --latin:  "IBM Plex Sans", system-ui, sans-serif;

  /* --- scroll-world engine hooks ----------------------------------------- */
  --sw-bg:   var(--bone);
  --sw-ink:  var(--ink);
  --accent:  var(--blue);
}

/* CONTRAST RULE — do not violate.
   --blue (#1863AC) on --navy (#0E2A47) measures 2.4:1 and fails WCAG at every
   size. On any dark surface the accent MUST lift to --blue-lift (#5B9BD5).
   --blue on --bone is ~5.3:1 and passes AA for body text. */
.on-dark {
  --sw-bg:  var(--navy);
  --sw-ink: var(--bone);
  --accent: var(--blue-lift);
}

/* --- direction ----------------------------------------------------------- */
/* Arabic-first. The generated camera flight travels right-to-left to match
   the reading direction; do not mirror the clips to "fix" this. */
html[dir="rtl"] body { font-family: var(--arabic); }
html[dir="ltr"] body { font-family: var(--latin); }

/* Latin numerals inside Arabic copy (tonnages, dimensions, Incoterms) keep
   Plex Latin so figures stay unambiguous. */
[dir="rtl"] .num { font-family: var(--latin); font-feature-settings: "tnum" 1; }