/* ============================================================================
   PropertyDesk — design tokens
   Single source for colour, type, space, radius and elevation.
   Nothing outside this file may declare a raw hex value.

   TWO STANDING RULES, enforced structurally:
   1. Green is an ACCENT, never a ground. Every --ground-* token is neutral.
      There is deliberately no --ground-green.
   2. RTL is handled with CSS logical properties (inline-start/end, margin-inline)
      everywhere. There must be no [dir="rtl"] override block in this codebase.
   ========================================================================== */

:root {

  /* --- neutral grounds (the only backgrounds that exist) ----------------- */
  --ground:        #FFFFFF;
  --ground-soft:   #F7F9F8;   /* section alternation */
  --ground-sunk:   #F1F5F3;   /* wells, table headers */
  --ground-invert: #101614;   /* footer / high-contrast bands */

  /* --- ink -------------------------------------------------------------- */
  --ink:           #0C1A14;
  --ink-2:         #33413A;
  --ink-muted:     #5E6E66;
  --ink-faint:     #6E7973;   /* 4.52:1 on white — carries account codes and figures */
  --ink-on-dark:   #EEF3F0;
  --ink-on-accent: #FFFFFF;

  /* --- rules & edges ---------------------------------------------------- */
  --line:          #E4EAE6;
  --line-strong:   #CDD8D2;

  /* --- brand accent (product palette: sea-green) ------------------------ */
  --accent:        #2E8B57;
  --accent-deep:   #1E6B47;
  --accent-dark:   #14352B;   /* type on light only, or invert bands */
  --accent-soft:   #E9F3ED;
  --accent-mist:   #F4F9F6;
  --accent-on-dark: #30915A;   /* 4.64:1 on --ground-invert; #2E8B57 only reaches 4.31 */

  /* --- gold: hairlines and rare emphasis. Never a fill for large areas --- */
  --gold:          #C8A24B;
  --gold-soft:     #F8F2E3;
  --glow-gold:     rgba(200,162,75,.12);   /* radial wash on dark bands */
  --glow-gold-sm:  rgba(200,162,75,.07);
  --on-dark-80:    rgba(255,255,255,.80);
  --on-dark-62:    rgba(255,255,255,.62);
  --on-dark-40:    rgba(255,255,255,.40);
  --on-dark-line:  rgba(255,255,255,.09);

  /* --- semantic (separate from the accent; never used decoratively) ------ */
  --ok:            #2E8B57;
  --ok-soft:       #E9F3ED;
  --warn:          #986419;   /* 4.53:1 on --warn-soft */
  --warn-soft:     #FBF2E0;
  --risk:          #C0392B;
  --risk-soft:     #FBEBE9;
  --info:          #2C6E9B;
  --info-soft:     #E8F1F7;

  /* --- type families ---------------------------------------------------- */
  --font-head:  'Sora', 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-body:  'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-ar:    'Noto Kufi Arabic', 'Segoe UI', Tahoma, sans-serif;
  --font-mono:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- type scale (1.200 minor third, 16px base) ------------------------ */
  --t-xs:    0.75rem;
  --t-sm:    0.875rem;
  --t-base:  1rem;
  --t-md:    1.125rem;
  --t-lg:    1.35rem;
  --t-xl:    1.62rem;
  --t-2xl:   1.95rem;
  --t-3xl:   2.34rem;
  --t-4xl:   2.99rem;
  --t-hero:  clamp(2.4rem, 5.2vw, 3.6rem);

  --lh-tight: 1.14;
  --lh-snug:  1.35;
  --lh-body:  1.65;

  --tracking-label: 0.10em;   /* uppercase pills only */
  --tracking-head: -0.025em;
  --weight-head: 700;

  /* --- space scale (4px base) ------------------------------------------- */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  3rem;
  --s-8:  4rem;
  --s-9:  6rem;
  --s-10: 8rem;
  --s-section: 120px;      /* the original vertical rhythm */
  --s-section-sm: 72px;

  /* --- measure ---------------------------------------------------------- */
  --measure:      65ch;   /* running prose */
  --measure-tight: 46ch;  /* headlines, dek */
  --container:    1160px;
  --container-narrow: 760px;

  /* --- radius ----------------------------------------------------------- */
  --r-sm:  11px;   /* form inputs */
  --r-btn: 12px;   /* buttons */
  --r:     16px;   /* cards, panels */
  --r-lg:  24px;   /* large surfaces */
  --r-pill: 100px;

  /* --- elevation (restrained; enterprise reads flatter) ----------------- */
  --sh-sm: 0 1px 2px rgba(12,26,20,.05), 0 4px 16px rgba(12,26,20,.05);
  --sh:    0 2px 6px rgba(12,26,20,.06), 0 16px 40px rgba(12,26,20,.09);
  --sh-lg: 0 4px 12px rgba(12,26,20,.07), 0 32px 80px rgba(12,26,20,.14);
  --sh-btn:      0 1px 2px rgba(12,26,20,.20), inset 0 1px 0 rgba(255,255,255,.08);
  --sh-btn-lift: 0 8px 24px rgba(12,26,20,.25);

  /* --- motion ----------------------------------------------------------- */
  --ease: cubic-bezier(.2,.6,.3,1);
  --dur:  .22s;
}

/* Arabic pages swap the body face only; every other token is shared, so the
   two languages cannot drift apart visually. */
:root[lang="ar"] {
  --font-head: var(--font-ar);
  --font-body: var(--font-ar);
  --tracking-head: 0;          /* negative tracking damages Arabic joins */
  --tracking-label: 0;         /* Arabic has no uppercase; spacing breaks words */
  --lh-body: 1.9;              /* Arabic needs more leading to breathe */
  --lh-tight: 1.4;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0s; }
}