/* tokens.css: the Sysenta family tokens for the marketing sites (round 2, 2026-10-15).
   ONE file, byte-identical in every site: the 8 Sysenta sites, outsourcehub-eg.com and shop.oya-sc.com.
   Source of truth: Sysenta_Sites/assets/css/tokens.css. OutsourceHub_Site/assets/css/ and
   Oya_Website/src/assets/css/ hold copies; never edit a copy, edit the source and copy it over.
   Values follow the app shell (00_تصميم_2026-10/sx-shell/sx-tokens.css): light F1, dark D1 (neutral charcoal).
   A site keeps its own accent (line colour, maroon, petrol) and maps its local names onto these.
   Theme: the device decides; <html data-theme="light|dark"> (the visitor's pick) overrides it. */
:root{
  /* surfaces, text and lines: light F1 */
  --sx-bg:#ECEEF1;        /* page (grey ground: outsourcehub-eg.com) */
  --sx-ground:#FFFFFF;    /* reading ground of the white-page sites (Sysenta, Oya) */
  --sx-surface:#FFFFFF;   /* cards, header, footer, forms */
  --sx-surface-2:#E3E6EA; /* table head, raised band */
  --sx-tint:#F5F6F8;      /* tinted sections */
  --sx-zebra:#F5F6F8;     /* zebra rows, quiet bands */
  --sx-line:#D5D9DF; --sx-grid:#E6E9ED;
  --sx-text:#15171A; --sx-text-2:#4B5058;   /* 17.4:1 and 7.6:1 on white */
  --sx-focus:#15171A; --sx-sel:#D5D9DF;
  --sx-sb-thumb:#A3AAB3; --sx-sb-track:#ECEEF1;
  --sx-sh1:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
  --sx-sh2:0 8px 24px -8px rgba(16,24,40,.18);
  --sx-sh3:0 24px 48px -16px rgba(16,24,40,.28);

  /* type: IBM Plex Sans Arabic (self-hosted as "PlexAr"); one size scale (px at a 16px root) */
  --sx-font:"PlexAr","Segoe UI",Tahoma,Arial,sans-serif;
  --sx-fs-12:.75rem; --sx-fs-13:.8125rem; --sx-fs-14:.875rem; --sx-fs-15:.9375rem; --sx-fs-16:1rem;
  --sx-fs-17:1.0625rem; --sx-fs-18:1.125rem; --sx-fs-20:1.25rem; --sx-fs-22:1.375rem; --sx-fs-28:1.75rem;

  /* spacing (4px grid) and corners */
  --sx-sp-1:4px; --sx-sp-2:8px; --sx-sp-3:12px; --sx-sp-4:16px; --sx-sp-5:20px; --sx-sp-6:24px; --sx-sp-8:32px; --sx-sp-12:48px;
  --sx-r-xs:2px; --sx-r-sm:4px; --sx-r:6px; --sx-r-md:8px; --sx-r-lg:12px; --sx-r-pill:999px;

  /* motion: one ease-out family and three durations (motion.css reads these) */
  --sx-ease:cubic-bezier(.16,1,.3,1); --sx-ease-out:cubic-bezier(.2,.7,.2,1);
  --sx-d1:150ms; --sx-d2:240ms; --sx-d3:520ms;
  color-scheme:light;
}
/* dark D1: the device decides, unless the visitor picked light with the toggle */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --sx-bg:#141414; --sx-ground:#141414; --sx-surface:#1C1C1C; --sx-surface-2:#242424; --sx-tint:#1C1C1C; --sx-zebra:#191919;
    --sx-line:#2F2F2F; --sx-grid:#262626; --sx-text:#ECECEC; --sx-text-2:#A9A9A9; --sx-focus:#ECECEC; --sx-sel:#3A3A3A;
    --sx-sb-thumb:#5C5C5C; --sx-sb-track:#1C1C1C;
    --sx-sh1:0 1px 2px rgba(0,0,0,.5); --sx-sh2:0 8px 24px -8px rgba(0,0,0,.6); --sx-sh3:0 24px 48px -16px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --sx-bg:#141414; --sx-ground:#141414; --sx-surface:#1C1C1C; --sx-surface-2:#242424; --sx-tint:#1C1C1C; --sx-zebra:#191919;
  --sx-line:#2F2F2F; --sx-grid:#262626; --sx-text:#ECECEC; --sx-text-2:#A9A9A9; --sx-focus:#ECECEC; --sx-sel:#3A3A3A;
  --sx-sb-thumb:#5C5C5C; --sx-sb-track:#1C1C1C;
  --sx-sh1:0 1px 2px rgba(0,0,0,.5); --sx-sh2:0 8px 24px -8px rgba(0,0,0,.6); --sx-sh3:0 24px 48px -16px rgba(0,0,0,.7);
  color-scheme:dark;
}