/* ============================================================
   TOROD — Design System tokens & base
   Torod Company for Information Technology
   Merchant shipping-aggregator app. Bilingual AR (RTL) / EN (LTR).

   NOTE: brand palette is provisional (clean violet identity) and
   built to be swapped the moment official Torod brand files land —
   change the --to-* scale + --brand aliases below and the whole
   app re-skins. Everything downstream references tokens, not hexes.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* ---- Neutral / Gray (cool, pairs with violet) ---- */
  --gray-25:#FCFCFD; --gray-50:#F8F8FC; --gray-100:#F2F2F8; --gray-200:#E7E7F0;
  --gray-300:#D4D4E2; --gray-400:#9E9EB3; --gray-500:#6E6E85; --gray-600:#52526A;
  --gray-700:#3A3A4E; --gray-800:#252536; --gray-900:#15151F; --gray-950:#0C0C14;

  /* ---- Primary — TOROD violet (official brand #6901FE) ---- */
  --to-25:#FAF7FF; --to-50:#F3EAFF; --to-100:#E7D6FF; --to-200:#D2B6FF;
  --to-300:#BD97FF; --to-400:#AB83FE; --to-500:#8A3DFE; --to-600:#6901FE;
  --to-700:#5601D1; --to-800:#4502A4; --to-900:#350A78; --to-950:#23074F;

  /* ---- Secondary — TOROD blue (official brand #5465FB) ---- */
  --bl-50:#EEF0FF; --bl-100:#DEE2FE; --bl-200:#C3C9FD; --bl-300:#9CA6FC;
  --bl-400:#7C88FC; --bl-500:#5465FB; --bl-600:#3A4BE8; --bl-700:#2C39C4;

  /* ---- Brand ink / neutral (official #38344A / #AEAEB0) ---- */
  --brand-ink:#38344A; --brand-mist:#AEAEB0;

  /* ---- Amber (COD / accent highlight) ---- */
  --am-50:#FFFBEB; --am-100:#FEF3C7; --am-200:#FDE68A; --am-300:#FCD34D;
  --am-400:#FBBF24; --am-500:#F59E0B; --am-600:#D97706; --am-700:#B45309; --am-800:#92400E;

  /* ---- Emerald (success / on-time / savings) ---- */
  --em-50:#ECFDF5; --em-100:#D1FAE5; --em-200:#A7F3D0; --em-300:#6EE7B7;
  --em-400:#34D399; --em-500:#10B981; --em-600:#059669; --em-700:#047857; --em-800:#065F46;

  /* ---- Semantic ---- */
  --error-50:#FEF3F2; --error-100:#FEE4E2; --error-200:#FECDCA; --error-300:#FDA29B;
  --error-500:#F04438; --error-600:#D92D20; --error-700:#B42318;
  --warning-50:var(--am-50); --warning-100:var(--am-100); --warning-200:var(--am-200); --warning-300:var(--am-300);
  --warning-500:var(--am-500); --warning-600:var(--am-600); --warning-700:var(--am-700);
  --success-50:var(--em-50); --success-100:var(--em-100); --success-200:var(--em-200);
  --success-500:var(--em-500); --success-600:var(--em-600); --success-700:var(--em-700);
  --info-50:#EFF8FF; --info-100:#D1E9FF; --info-500:#2E90FA; --info-600:#1570EF; --info-700:#175CD3;

  /* ---- AI accent (generative moments) — official brand trio ---- */
  --ai-1:#6901FE; --ai-2:#AB83FE; --ai-3:#5465FB;
  --ai-grad:linear-gradient(120deg, #5465FB 0%, #6901FE 50%, #AB83FE 100%);
  --ai-wash:#F3EAFF; --ai-line:#E0CCFF; --ai-ink:#5601D1;

  /* ---- Brand aliases (point everything here) ---- */
  --brand:var(--to-600);
  --brand-strong:var(--to-700);
  --brand-deep:var(--to-900);
  --brand-wash:var(--to-50);
  --brand-wash-2:var(--to-100);
  --brand-2:var(--bl-500);
  --accent:var(--am-500);
  --accent-deep:var(--am-700);
  --brand-grad:linear-gradient(135deg, var(--to-600), var(--to-800));

  /* ---- Text ---- */
  --text:var(--gray-900);
  --text-2:var(--gray-700);
  --text-3:var(--gray-500);
  --text-on-brand:#ffffff;

  /* ---- Surfaces ---- */
  --bg:var(--gray-50);
  --surface:#ffffff;
  --surface-2:var(--gray-50);
  --line:var(--gray-200);
  --line-2:var(--gray-300);

  /* ---- Radius ---- */
  --r-xs:6px; --r-sm:8px; --r-md:10px; --r-lg:12px; --r-xl:16px; --r-2xl:20px; --r-3xl:26px; --r-full:999px;

  /* ---- Shadows (base #1A1033 violet-tinted) ---- */
  --sh-xs:0 1px 2px rgba(26,16,51,.06);
  --sh-sm:0 1px 3px rgba(26,16,51,.10), 0 1px 2px rgba(26,16,51,.06);
  --sh-md:0 4px 8px -2px rgba(26,16,51,.10), 0 2px 4px -2px rgba(26,16,51,.06);
  --sh-lg:0 12px 16px -4px rgba(26,16,51,.10), 0 4px 6px -2px rgba(26,16,51,.04);
  --sh-xl:0 20px 24px -4px rgba(26,16,51,.10), 0 8px 8px -4px rgba(26,16,51,.04);
  --sh-2xl:0 28px 56px -12px rgba(26,16,51,.22);
  --sh-brand:0 10px 26px -6px rgba(105,1,254,.42);

  /* ---- Type scale ---- */
  --d-2xl:72px; --d-xl:60px; --d-lg:48px; --d-md:36px; --d-sm:30px; --d-xs:24px;
  --t-xl:20px; --t-lg:18px; --t-md:16px; --t-sm:14px; --t-xs:12px;

  --font-ar:"IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-en:"Plus Jakarta Sans", system-ui, sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, monospace;
}

/* ============================================================ Base */
*{box-sizing:border-box; margin:0; padding:0}
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-ar);
  background:var(--bg); color:var(--text);
  line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body.en{ font-family:var(--font-en); }

.mono{font-family:var(--font-mono)}
.num{font-family:var(--font-en); font-feature-settings:"tnum" 1}
body:not(.en) .num{font-family:var(--font-ar); font-feature-settings:"tnum" 1}

/* ---- Bilingual visibility ---- */
[data-en]{display:none}
body.en [data-ar]{display:none}
body.en [data-en]{display:revert}
.inline-en[data-en]{display:none}
body.en .inline-en[data-en]{display:inline}

a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer}
img{max-width:100%; display:block}
:focus-visible{outline:2px solid var(--to-500); outline-offset:2px}

/* ============================================================ Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:inherit; font-weight:600; font-size:var(--t-sm);
  padding:10px 16px; border-radius:var(--r-sm); border:1px solid transparent;
  transition:background .15s, border-color .15s, color .15s, box-shadow .15s, transform .05s, filter .15s;
  white-space:nowrap; line-height:1;
}
.btn:active{transform:translateY(.5px)}
.btn .i{width:16px; height:16px; flex:none}
.btn-primary{background:var(--to-600); color:#fff; box-shadow:var(--sh-xs)}
.btn-primary:hover{background:var(--to-700)}
.btn-primary:active{background:var(--to-800)}
.btn-ai{background:var(--ai-grad); color:#fff; box-shadow:var(--sh-brand)}
.btn-ai:hover{filter:brightness(1.06)}
.btn-dark{background:var(--gray-900); color:#fff}
.btn-dark:hover{background:var(--gray-800)}
.btn-secondary{background:#fff; color:var(--gray-700); border-color:var(--gray-300); box-shadow:var(--sh-xs)}
.btn-secondary:hover{background:var(--gray-50); border-color:var(--gray-400)}
.btn-ghost{background:transparent; color:var(--gray-600)}
.btn-ghost:hover{background:var(--gray-100); color:var(--gray-800)}
.btn-brand-soft{background:var(--to-50); color:var(--to-700); border-color:var(--to-200)}
.btn-brand-soft:hover{background:var(--to-100)}
.btn-lg{font-size:var(--t-md); padding:14px 22px; border-radius:var(--r-md)}
.btn-sm{font-size:var(--t-xs); padding:8px 12px}
.btn-block{width:100%}
.btn:disabled{opacity:.5; pointer-events:none}

/* ============================================================ Chips / tags / badges */
.tag{
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--t-xs); font-weight:600; padding:4px 10px; border-radius:var(--r-full);
  background:var(--gray-100); color:var(--gray-700); border:1px solid var(--gray-200);
}
.tag-brand{background:var(--to-50); color:var(--to-700); border-color:var(--to-200)}
.tag-am{background:var(--am-50); color:var(--am-700); border-color:var(--am-200)}
.tag-em{background:var(--em-50); color:var(--em-700); border-color:var(--em-200)}
.tag-error{background:var(--error-50); color:var(--error-700); border-color:var(--error-200)}
.tag-warning{background:var(--warning-50); color:var(--warning-700); border-color:var(--warning-200)}
.tag-info{background:var(--info-50); color:var(--info-600); border-color:var(--info-100)}
.tag-ai{background:var(--ai-wash); color:var(--ai-ink); border-color:var(--ai-line)}
.dot{width:8px; height:8px; border-radius:50%; flex:none}

/* ============================================================ Cards */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--sh-sm)}
.card-flat{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg)}

/* ============================================================ Helpers */
.row{display:flex; align-items:center; gap:12px}
.col{display:flex; flex-direction:column}
.between{justify-content:space-between}
.wrap{flex-wrap:wrap}
.muted{color:var(--text-3)}
.eyebrow{font-size:var(--t-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--to-600)}

/* scrollbars */
.scroll::-webkit-scrollbar{width:8px; height:8px}
.scroll::-webkit-scrollbar-thumb{background:var(--gray-300); border-radius:99px; border:2px solid transparent; background-clip:content-box}
.scroll::-webkit-scrollbar-thumb:hover{background:var(--gray-400); background-clip:content-box}

/* ============================================================ Brand mark */
.to-mark{
  display:grid; place-items:center; flex:none; color:#fff;
  background:var(--brand-grad);
  border-radius:var(--r-md);
}
.to-mark svg{width:60%; height:60%}