/* ==========================================================================
   sx-tokens.css — Sysenta shared design tokens (v1.0, 2026-10)
   Layers: 1) primitive  →  2) semantic (light/dark)  →  3) component
   One neutral grey family (light F1 / dark D1) for every product. A product changes ONE thing:
   <html data-product="oya">  (or sets --sx-brand / --sx-on-brand itself).
   Theme: follows the device; <html data-theme="light|dark"> overrides it.
   No gradients. One radius (8px). IBM Plex Sans Arabic, self-hosted.
   ========================================================================== */

/* ---------- 1) PRIMITIVES (never used directly by components) ---------- */
:root{
  --sx-white:#FFFFFF;
  --sx-ink-black:#08080C;
  /* neutral greys — owner pick 2026-10-14: light F1 + dark D1 (no blue cast) */
  --sx-l-page:#ECEEF1; --sx-l-card:#FFFFFF; --sx-l-2:#E3E6EA; --sx-l-zebra:#F5F6F8;
  --sx-l-line:#D5D9DF; --sx-l-grid:#E6E9ED; --sx-l-line-strong:#C3C8D0; --sx-l-field-line:#9AA1AC;
  --sx-l-text:#16181D; --sx-l-text-2:#363B45; --sx-l-muted:#5B6270; --sx-l-ph:#6B7280;
  --sx-d-page:#141414; --sx-d-card:#1C1C1C; --sx-d-2:#242424; --sx-d-3:#2B2B2B; --sx-d-zebra:#191919;
  --sx-d-line:#2F2F2F; --sx-d-grid:#262626; --sx-d-line-strong:#3D3D3D; --sx-d-field-line:#5A5A5A;
  --sx-d-text:#EDEDED; --sx-d-text-2:#CFCFCF; --sx-d-muted:#A0A0A0; --sx-d-ph:#8F8F8F;
 /* base the rail colour is mixed into */

  --sx-green-700:#15803D; --sx-green-50:#F0FDF4;  --sx-green-300:#86EFAC;
  --sx-amber-700:#B45309; --sx-amber-50:#FFFBEB;  --sx-amber-300:#FCD34D;
  --sx-red-700:#B91C1C;   --sx-red-50:#FEF2F2;    --sx-red-300:#FCA5A5;
  --sx-blue-700:#1D4ED8;  --sx-blue-50:#EFF6FF;   --sx-blue-300:#93C5FD;

  --sx-font:"IBM Plex Sans Arabic","IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sx-font-mono:ui-monospace,"Cascadia Mono",Consolas,monospace;

  /* type scale (px → rem at 16px root) */
  --sx-fs-12:.75rem; --sx-fs-13:.8125rem; --sx-fs-14:.875rem; --sx-fs-15:.9375rem;
  --sx-fs-16:1rem;   --sx-fs-18:1.125rem; --sx-fs-22:1.375rem; --sx-fs-28:1.75rem;
  --sx-fw-regular:400; --sx-fw-medium:500; --sx-fw-bold:700;

  /* spacing — 4px grid */
  --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-radius:8px; --sx-radius-sm:6px; --sx-radius-pill:999px;
  --sx-dur:160ms; --sx-dur-slow:240ms;
  --sx-ease:cubic-bezier(.16,1,.3,1); /* exponential ease-out */
}

/* ---------- Product presets (brand colours from the catalogue) ----------
   --sx-brand      raw product colour (rail tint; never theme-switched)
   --sx-on-brand   text/icon colour on a brand fill
   --sx-ink-l      brand as TEXT on light surfaces (≥4.5:1 on #FFF)
   --sx-ink-d      brand as TEXT on dark surfaces  (≥4.5:1 on #1C1C1C)
   --sx-fill-d / --sx-on-fill-d   only when the brand fill disappears on dark */
:root,[data-product="oya"]{--sx-brand:#8E1B3A;--sx-on-brand:#FFFFFF;--sx-ink-l:#8E1B3A;--sx-ink-d:#F58AA5}
[data-product="audiexa"]{--sx-brand:#00704F;--sx-on-brand:#FFFFFF;--sx-ink-l:#00704F;--sx-ink-d:#34D399}
[data-product="docmano"]{--sx-brand:#F26B1D;--sx-on-brand:#15171A;--sx-ink-l:#A8430A;--sx-ink-d:#FB923C}
[data-product="daftrix"]{--sx-brand:#1D4ED8;--sx-on-brand:#FFFFFF;--sx-ink-l:#1D4ED8;--sx-ink-d:#93B4FF}
[data-product="teamenta"]{--sx-brand:#6D28D9;--sx-on-brand:#FFFFFF;--sx-ink-l:#6D28D9;--sx-ink-d:#C4B5FD}
[data-product="raqeebo"]{--sx-brand:#C8102E;--sx-on-brand:#FFFFFF;--sx-ink-l:#C8102E;--sx-ink-d:#FF8A8A}
[data-product="souqmint"]{--sx-brand:#14B8A6;--sx-on-brand:#15171A;--sx-ink-l:#0F766E;--sx-ink-d:#2DD4BF}
[data-product="nadiyo"]{--sx-brand:#F2B705;--sx-on-brand:#15171A;--sx-ink-l:#7A5A00;--sx-ink-d:#F2B705}
[data-product="hub"]{--sx-brand:#15171A;--sx-on-brand:#FFFFFF;--sx-ink-l:#15171A;--sx-ink-d:#E6E6E6;--sx-fill-d:#E6E6E6;--sx-on-fill-d:#141414}
[data-product="deleon"]{--sx-brand:#B7410E;--sx-on-brand:#FFFFFF;--sx-ink-l:#B7410E;--sx-ink-d:#F08A4B}

/* ---------- 2) SEMANTIC — light (default) ---------- */
:root{
  color-scheme:light;
  --sx-bg:var(--sx-l-page);
  --sx-surface:var(--sx-l-card);
  --sx-surface-2:var(--sx-l-2);
  --sx-surface-3:var(--sx-l-line);
  --sx-field:var(--sx-l-card);
  --sx-text:var(--sx-l-text);
  --sx-text-2:var(--sx-l-text-2);
  --sx-muted:var(--sx-l-muted);          /* 7.6:1 on white */
  --sx-placeholder:var(--sx-l-ph);    /* 4.8:1 on white */
  --sx-line:var(--sx-l-line);
  --sx-line-strong:var(--sx-l-line-strong);
  --sx-grid:var(--sx-l-grid); --sx-zebra:var(--sx-l-zebra);
  --sx-field-line:var(--sx-l-field-line);     /* 3:1 boundary for inputs */

  --sx-accent:var(--sx-brand);             /* fills: primary button, active tile */
  --sx-on-accent:var(--sx-on-brand);
  --sx-accent-ink:var(--sx-ink-l);         /* brand used as text / links */
  --sx-accent-soft:color-mix(in srgb,var(--sx-accent-ink) 9%,var(--sx-surface));
  --sx-accent-hover:color-mix(in srgb,var(--sx-accent) 86%,#000);
  --sx-focus:var(--sx-accent-ink);

  --sx-ok:var(--sx-green-700);  --sx-ok-soft:var(--sx-green-50);
  --sx-warn:var(--sx-amber-700);--sx-warn-soft:var(--sx-amber-50);
  --sx-bad:var(--sx-red-700);   --sx-bad-soft:var(--sx-red-50);
  --sx-info:var(--sx-blue-700); --sx-info-soft:var(--sx-blue-50);

  --sx-shadow-1:0 1px 2px rgb(17 19 24 / .06);
  --sx-shadow-2:0 4px 12px -2px rgb(17 19 24 / .10),0 2px 4px -2px rgb(17 19 24 / .06);
  --sx-shadow-3:0 16px 40px -8px rgb(17 19 24 / .22),0 4px 10px -4px rgb(17 19 24 / .10);
  --sx-scrim:rgb(17 19 24 / .45);

  /* scrollbars — light content */
  --sx-sb-track:var(--sx-l-2);
  --sx-sb-thumb:var(--sx-l-field-line);
  --sx-selection:color-mix(in srgb,var(--sx-accent-ink) 22%,transparent);
}

/* ---------- 2b) SEMANTIC — dark (same names) ---------- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --sx-bg:var(--sx-d-page);
    --sx-surface:var(--sx-d-card);
    --sx-surface-2:var(--sx-d-2);
    --sx-surface-3:var(--sx-d-3);
    --sx-field:var(--sx-d-page);
    --sx-text:var(--sx-d-text);
    --sx-text-2:var(--sx-d-text-2);
    --sx-muted:var(--sx-d-muted);
    --sx-placeholder:var(--sx-d-ph);
    --sx-line:var(--sx-d-line);
    --sx-line-strong:var(--sx-d-line-strong);
  --sx-grid:var(--sx-d-grid); --sx-zebra:var(--sx-d-zebra);
    --sx-field-line:var(--sx-d-field-line);
    --sx-accent:var(--sx-fill-d,var(--sx-brand));
    --sx-on-accent:var(--sx-on-fill-d,var(--sx-on-brand));
    --sx-accent-ink:var(--sx-ink-d);
    --sx-accent-soft:color-mix(in srgb,var(--sx-accent-ink) 14%,var(--sx-surface));
    --sx-accent-hover:color-mix(in srgb,var(--sx-accent) 84%,#fff);
    --sx-ok:var(--sx-green-300);  --sx-ok-soft:color-mix(in srgb,var(--sx-green-300) 13%,var(--sx-surface));
    --sx-warn:var(--sx-amber-300);--sx-warn-soft:color-mix(in srgb,var(--sx-amber-300) 13%,var(--sx-surface));
    --sx-bad:var(--sx-red-300);   --sx-bad-soft:color-mix(in srgb,var(--sx-red-300) 13%,var(--sx-surface));
    --sx-info:var(--sx-blue-300); --sx-info-soft:color-mix(in srgb,var(--sx-blue-300) 13%,var(--sx-surface));
    --sx-shadow-1:0 1px 2px rgb(0 0 0 / .4);
    --sx-shadow-2:0 6px 16px -4px rgb(0 0 0 / .5);
    --sx-shadow-3:0 20px 48px -8px rgb(0 0 0 / .65),0 0 0 1px rgb(255 255 255 / .04);
    --sx-scrim:rgb(0 0 0 / .62);
    --sx-sb-track:var(--sx-d-3);
    --sx-sb-thumb:var(--sx-d-field-line);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --sx-bg:var(--sx-d-page);
  --sx-surface:var(--sx-d-card);
  --sx-surface-2:var(--sx-d-2);
  --sx-surface-3:var(--sx-d-3);
  --sx-field:var(--sx-d-page);
  --sx-text:var(--sx-d-text);
  --sx-text-2:var(--sx-d-text-2);
  --sx-muted:var(--sx-d-muted);
  --sx-placeholder:var(--sx-d-ph);
  --sx-line:var(--sx-d-line);
  --sx-line-strong:var(--sx-d-line-strong);
  --sx-grid:var(--sx-d-grid); --sx-zebra:var(--sx-d-zebra);
  --sx-field-line:var(--sx-d-field-line);
  --sx-accent:var(--sx-fill-d,var(--sx-brand));
  --sx-on-accent:var(--sx-on-fill-d,var(--sx-on-brand));
  --sx-accent-ink:var(--sx-ink-d);
  --sx-accent-soft:color-mix(in srgb,var(--sx-accent-ink) 14%,var(--sx-surface));
  --sx-accent-hover:color-mix(in srgb,var(--sx-accent) 84%,#fff);
  --sx-ok:var(--sx-green-300);  --sx-ok-soft:color-mix(in srgb,var(--sx-green-300) 13%,var(--sx-surface));
  --sx-warn:var(--sx-amber-300);--sx-warn-soft:color-mix(in srgb,var(--sx-amber-300) 13%,var(--sx-surface));
  --sx-bad:var(--sx-red-300);   --sx-bad-soft:color-mix(in srgb,var(--sx-red-300) 13%,var(--sx-surface));
  --sx-info:var(--sx-blue-300); --sx-info-soft:color-mix(in srgb,var(--sx-blue-300) 13%,var(--sx-surface));
  --sx-shadow-1:0 1px 2px rgb(0 0 0 / .4);
  --sx-shadow-2:0 6px 16px -4px rgb(0 0 0 / .5);
  --sx-shadow-3:0 20px 48px -8px rgb(0 0 0 / .65),0 0 0 1px rgb(255 255 255 / .04);
  --sx-scrim:rgb(0 0 0 / .62);
  --sx-sb-track:var(--sx-d-3);
  --sx-sb-thumb:var(--sx-d-field-line);
}

/* ---------- 3) COMPONENT tokens ---------- */
:root{
  /* rail — the product's dark accent, identical in both themes */
  --sx-rail-w:56px;
  --sx-rail-bg:color-mix(in srgb,var(--sx-brand) 38%,var(--sx-ink-black));
  --sx-rail-ink:#FFFFFF;
  --sx-rail-ink-2:rgb(255 255 255 / .74);
  --sx-rail-hover:rgb(255 255 255 / .09);
  --sx-rail-active:rgb(255 255 255 / .17);
  --sx-rail-line:rgb(255 255 255 / .10);
  --sx-rail-focus:#FFFFFF;

  /* floating panel / popovers */
  --sx-panel-w:288px;
  --sx-panel-bg:var(--sx-surface);
  --sx-panel-line:var(--sx-line);
  --sx-panel-item-h:36px;

  /* top bar */
  --sx-top-h:56px;
  --sx-top-bg:color-mix(in srgb,var(--sx-bg) 92%,transparent);

  /* buttons & fields */
  --sx-ctl-h:36px;
  --sx-btn-primary-bg:var(--sx-accent);
  --sx-btn-primary-ink:var(--sx-on-accent);
  --sx-btn-primary-hover:var(--sx-accent-hover);
  --sx-btn-bg:var(--sx-surface);
  --sx-btn-ink:var(--sx-text);
  --sx-btn-line:var(--sx-line-strong);
  --sx-btn-hover:var(--sx-surface-2);

  /* tables */
  --sx-tbl-head-bg:var(--sx-surface-2);
  --sx-tbl-head-ink:var(--sx-muted);
  --sx-tbl-row-bg:var(--sx-surface);
  --sx-tbl-zebra:var(--sx-zebra);
  --sx-tbl-row-hover:color-mix(in srgb,var(--sx-accent-ink) 7%,var(--sx-surface));
  --sx-tbl-row-sel:color-mix(in srgb,var(--sx-accent-ink) 12%,var(--sx-surface));
  --sx-tbl-line:var(--sx-line);
  --sx-tbl-grid:var(--sx-grid);
  --sx-tbl-foot-bg:var(--sx-surface-2);
  --sx-tbl-pad-y:10px; --sx-tbl-pad-x:14px;
  --sx-tbl-pad-y-c:5px; --sx-tbl-pad-x-c:10px;
  --sx-tbl-max-h:calc(100vh - 96px);

  /* scrollbar on always-dark surfaces (rail, mobile bar) */
  --sx-sb-track-dark:var(--sx-d-3);
  --sx-sb-thumb-dark:var(--sx-d-field-line);
}
@media (max-width:767.98px),(pointer:coarse){
  :root{--sx-ctl-h:44px;--sx-panel-item-h:44px}
}