/* ==========================================================================
   Wakeel Desk — Design Tokens (Modern direction, bilingual-ready)
   Import first in globals.css. Reference these variables everywhere —
   never hardcode a color, font, or spacing value in components.
   ========================================================================== */

:root {
  /* ---- Color: primary ---- */
  --color-navy: #16294D;
  --color-navy-dark: #0F1D38;
  --color-navy-tint: #EAEEF5;

  --color-amber: #C9932E;
  --color-amber-dark: #A97A22;
  --color-amber-tint: #FBF1DF;

  /* ---- Color: neutrals ---- */
  --color-bg: #FAFAF7;
  --color-panel: #FFFFFF;
  --color-ink: #14161A;
  --color-ink-soft: #565B66;
  --color-ink-faint: #8A8F99;
  --color-line: #E4E3DD;
  --color-line-strong: #CFCDC3;

  /* ---- Color: semantic ---- */
  --color-success: #2F6B4F;
  --color-success-bg: #E8F1EB;
  --color-alert: #B5432E;
  --color-alert-bg: #FBEAE5;
  --color-warning: #B5811E;
  --color-warning-bg: #FAF1DC;
  --color-info: #2A5C8A;
  --color-info-bg: #E7EFF6;

  /* ---- Typography: English (UI default) ---- */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'IBM Plex Sans', -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* ---- Typography: Urdu UI ---- */
  --font-ur-heading: 'Noto Naskh Arabic', serif;
  --font-ur-body: 'Noto Naskh Arabic', serif;

  /* ---- Typography: Urdu generated documents only ---- */
  --font-ur-document: 'Mehr Nastaliq Web', 'Noto Nastaliq Urdu', serif;

  --text-xs: 12px;    --leading-xs: 16px;
  --text-sm: 13.5px;  --leading-sm: 20px;
  --text-base: 15px;  --leading-base: 22px;
  --text-md: 17px;    --leading-md: 24px;
  --text-lg: 20px;    --leading-lg: 26px;
  --text-xl: 28px;    --leading-xl: 34px;
  --text-2xl: 36px;   --leading-2xl: 42px;
  --text-3xl: 48px;   --leading-3xl: 54px;

  --text-ur-sm: 15px;   --leading-ur-sm: 26px;
  --text-ur-base: 17px; --leading-ur-base: 30px;
  --text-ur-md: 19px;   --leading-ur-md: 32px;
  --text-ur-lg: 22px;   --leading-ur-lg: 36px;
  --text-ur-xl: 28px;   --leading-ur-xl: 46px;
  --text-ur-2xl: 34px;  --leading-ur-2xl: 54px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- Spacing ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---- Radius ---- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ---- Shadow ---- */
  --shadow-sm: 0 1px 2px rgba(20, 22, 26, 0.04);
  --shadow-md: 0 4px 12px rgba(20, 22, 26, 0.08);
  --shadow-modal: 0 12px 32px rgba(20, 22, 26, 0.18);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-standard: 200ms;

  /* ---- Layout ---- */
  --sidebar-width: 240px;
  --topbar-height: 64px;
  --content-max-width: 1180px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Bilingual visibility — do not remove !important */
html:not(.ur) .lang-ur {
  display: none !important;
}

html.ur .lang-en {
  display: none !important;
}

html.ur body {
  font-family: var(--font-ur-body);
}

html.ur h1,
html.ur h2,
html.ur h3,
html.ur .brand {
  font-family: var(--font-ur-heading);
  font-weight: 700;
}

html.ur {
  direction: rtl;
}

/* Case numbers, dates, CNICs and English proper nouns remain LTR */
.ltr-embed {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: var(--font-mono);
}