/* ==========================================================================
   Wesal Design System V2 — tokens (source of truth)
   Direction: «خيط وصال» — approved via NG0/NG0.1
   (docs/nextgen/NG0_VISUAL_DIRECTION.md). Identity derives from the OFFICIAL
   logo assets (public/assets/brand/): #0BF364→#03B1BD thread, #0B2545 navy.
   Channel colors are badge-level accents only — never app paint.
   ========================================================================== */
:root {
  /* ---- Brand ---- */
  --w-thread: linear-gradient(90deg, #0BF364, #03B1BD);
  --w-thread-v: linear-gradient(180deg, #0BF364, #03B1BD);
  --w-brand-navy: #0B2545;
  --w-teal: #0A7E8C;            /* action color — logo teal darkened to AA */
  --w-teal-strong: #075E69;
  --w-teal-soft: #E3F4F6;
  --w-teal-ring: rgba(10, 126, 140, 0.35);

  /* ---- Surfaces ---- */
  --w-canvas: #F6F7F9;
  --w-surface: #FFFFFF;
  --w-surface-2: #EFF2F6;
  --w-surface-3: #E6EAF0;

  /* ---- Ink ---- */
  --w-ink: #0B2545;             /* the wordmark navy writes the interface */
  --w-ink-2: #44566E;
  --w-ink-3: #566A80;           /* ≥4.5:1 even on --w-surface-2 (placeholders) */
  --w-ink-inverse: #F2F6FC;

  /* ---- Lines ---- */
  --w-line: #E3E8EF;            /* decorative hairline */
  --w-line-strong: #697C94;     /* control borders — ≥3:1 (WCAG 1.4.11) */

  /* ---- Status (icon + label + color, never color alone) ---- */
  --w-success: #137A44;
  --w-success-soft: #E4F3EA;
  --w-warn: #8A5A00;
  --w-warn-soft: #FBF3E0;
  --w-danger: #B3382D;
  --w-danger-soft: #FBEAE8;
  --w-info: #22539E;
  --w-info-soft: #E8EFFA;

  /* ---- Channel accents (badges only) ---- */
  --ch-whatsapp: #1FA855;
  --ch-whatsapp-soft: #E4F6EB;
  --ch-instagram: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF);
  --ch-instagram-ink: #B0246A;
  --ch-instagram-soft: #FCEAF3;
  --ch-messenger-ink: #1B4FD8;
  --ch-messenger-soft: #E8F0FF;

  /* ---- Shape ---- */
  --r-ctl: 10px;
  --r-card: 14px;
  --r-sheet: 20px;

  /* ---- Elevation (3 levels only) ---- */
  --e-raised: 0 1px 2px rgba(11, 37, 69, 0.06);
  --e-float: 0 12px 32px rgba(11, 37, 69, 0.18);

  /* ---- Typography ---- */
  --font-ar: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --font-en: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
  --lh-body: 1.6;               /* Arabic-comfortable line height */
  --fs-body: 14px;              /* operational floor (NG0.1 R8) */
  --fs-meta: 12.5px;
  /* NG5.1 — report-chart type scale: card title (16px) > legend > tick.
     The tick is the table-header size (readable) and sits BELOW the legend;
     charts are drawn at scale 1 (public/v2/chart.js) so these are real px. */
  --fs-chart-legend: 12.5px;
  --fs-chart-tick: 11.5px;
  --fs-title: 22px;

  /* ---- Spacing (8px base) ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;

  /* ---- Layout ---- */
  --shell-side: 264px;
  --shell-side-rail: 68px;
  --shell-top: 56px;
  --shell-top-mobile: 52px;
  --content-max: 1400px;

  /* ---- Z scale ---- */
  --z-topbar: 40;
  --z-tabbar: 60;
  --z-scrim: 90;
  --z-layer: 100;
  --z-toast: 110;

  /* ---- Motion ---- */
  --motion-fast: 150ms ease-out;
  --motion-panel: 250ms ease;

  /* ---- Focus / touch ---- */
  --focus-ring: 2px solid var(--w-teal);
  --touch-min: 44px;

  /* Breakpoints (reference for media queries — CSS vars cannot drive them):
     mobile ≤767px · tablet 768–1023px · narrow desktop 1024–1180px · desktop ≥1181px */
}

[data-theme="dark"] {
  --w-brand-navy: #122E52;
  --w-teal: #2FB7C6;
  --w-teal-strong: #43C7D6;
  --w-teal-soft: #0E3A44;
  --w-teal-ring: rgba(47, 183, 198, 0.4);

  --w-canvas: #0A1120;
  --w-surface: #101A2E;
  --w-surface-2: #18233A;
  --w-surface-3: #1F2C47;

  --w-ink: #E8EDF6;
  --w-ink-2: #9FB0C7;
  --w-ink-3: #8296AF;
  --w-ink-inverse: #0B2545;

  --w-line: #223050;
  --w-line-strong: #5C7392;    /* ≥3:1 on --w-surface (measured 3.57) */

  --w-success: #38C172;
  --w-success-soft: #11301F;
  --w-warn: #E2A93B;
  --w-warn-soft: #33270E;
  --w-danger: #F07A6E;
  --w-danger-soft: #3A1713;
  --w-info: #7FA8E8;
  --w-info-soft: #14243E;

  --ch-whatsapp: #2EDB74;
  --ch-whatsapp-soft: #0F2E1B;
  --ch-instagram-ink: #F27AB5;
  --ch-instagram-soft: #33101F;
  --ch-messenger-ink: #8AB4FF;
  --ch-messenger-soft: #10213F;

  --e-raised: 0 1px 2px rgba(0, 0, 0, 0.35);
  --e-float: 0 12px 32px rgba(0, 0, 0, 0.55);
}

/* ---- Base / a11y primitives ---- */
:focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Forced colors / Windows high contrast: keep semantics on system colors and
   restore borders where our design removes them. */
@media (forced-colors: active) {
  .btn, .chip, .nav-item, .icon-btn { border: 1px solid ButtonText; }
  .thread-bar, .nav-item.active::before { background: Highlight; }
}

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}
.skip-link {
  position: absolute; inset-inline-start: 8px; top: -48px;
  background: var(--w-surface); color: var(--w-teal-strong);
  padding: 8px 14px; border-radius: 10px; z-index: 120;
  box-shadow: var(--e-float); font-weight: 700; transition: top var(--motion-fast);
}
.skip-link:focus { top: 8px; }