/* TAWASH Design System 1.0
   Calm real-estate SaaS, RTL-first and mobile-first. Built atop existing TAWASH
   brand tokens; semantic variables must be reused rather than re-invented in pages.
   Components are scoped to .tw-* so existing payment and meeting journeys remain intact. */
:root {
  --tw-space-1:4px; --tw-space-2:8px; --tw-space-3:12px; --tw-space-4:16px;
  --tw-space-5:20px; --tw-space-6:24px; --tw-space-8:32px; --tw-space-10:40px;
  --tw-radius-sm:10px; --tw-radius-md:14px; --tw-radius-lg:20px;
  --tw-touch:44px;
  --tw-elevation-card:0 1px 2px rgba(11,21,48,.04), 0 8px 30px -24px rgba(11,21,48,.2);
  --tw-focus:0 0 0 3px color-mix(in srgb,var(--primary) 22%,transparent);
  --tw-surface:var(--panel); --tw-surface-muted:var(--sunk); --tw-surface-accent:var(--primary-soft);
  --tw-text:var(--ink); --tw-text-muted:var(--soft); --tw-border:var(--rule);
  --tw-accent:var(--primary); --tw-positive:var(--jade); --tw-danger:var(--coral);
}
.tw-surface { border:1px solid var(--tw-border); background:var(--tw-surface); border-radius:var(--tw-radius-lg); box-shadow:var(--tw-elevation-card); }
.tw-muted { color:var(--tw-text-muted); }
.tw-caption { font:500 12px/1.55 var(--body); color:var(--tw-text-muted); }
.tw-kicker { font:700 11px/1.5 var(--body); color:var(--tw-accent); letter-spacing:.015em; }
.tw-heading { margin:0; font:650 clamp(19px,4.6vw,26px)/1.42 var(--display); color:var(--tw-text); }
.tw-control { min-height:var(--tw-touch); border-radius:var(--tw-radius-sm); font:600 14px/1.5 var(--body); cursor:pointer; }
.tw-control:focus-visible, .tw-field:focus-visible, .tw-round-action:focus-visible { outline:3px solid var(--tw-accent); outline-offset:3px; }
.tw-control:disabled, .tw-round-action:disabled { opacity:.55; cursor:not-allowed; }
.tw-control-primary { background:var(--tw-accent); color:var(--on-primary); border:1px solid var(--tw-accent); }
.tw-control-secondary { background:var(--tw-surface); color:var(--tw-accent); border:1px solid var(--tw-border); }
.tw-field { display:block; min-width:0; width:100%; padding:var(--tw-space-3) var(--tw-space-4); border:1.5px solid var(--tw-border);
  border-radius:var(--tw-radius-md); background:var(--tw-surface); color:var(--tw-text); font:400 16px/1.7 var(--body); }
.tw-field:focus { border-color:var(--tw-accent); outline:0; box-shadow:var(--tw-focus); }
.tw-round-action { display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  width:76px; height:76px; flex:0 0 76px; min-width:76px; border-radius:50%; background:var(--tw-accent); color:var(--on-primary); border:0; cursor:pointer; }
.tw-state { display:flex; align-items:flex-start; gap:var(--tw-space-2); padding:var(--tw-space-3);
  border-radius:var(--tw-radius-sm); background:var(--tw-surface-muted); color:var(--tw-text-muted); font:500 13px/1.6 var(--body); }
.tw-state[data-state=error] { color:var(--tw-danger); background:color-mix(in srgb,var(--tw-danger) 8%,var(--tw-surface)); }
.tw-state[data-state=success] { color:var(--tw-positive); background:color-mix(in srgb,var(--tw-positive) 8%,var(--tw-surface)); }
.tw-state[data-state=loading] { color:var(--tw-accent); }
.tw-step { display:inline-flex; justify-content:center; align-items:center; min-width:25px; height:25px;
  border-radius:8px; background:var(--tw-surface-accent); color:var(--tw-accent); font:700 12px var(--body); }
.tw-divider { border:0; border-top:1px solid var(--tw-border); margin:var(--tw-space-4) 0; }
@media (prefers-reduced-motion: no-preference) {
  .tw-control, .tw-round-action { transition:box-shadow .16s ease,transform .16s ease,background .16s ease; }
  .tw-control:not(:disabled):active,.tw-round-action:not(:disabled):active { transform:scale(.985); }
}
@media (prefers-reduced-motion:reduce) { .tw-control,.tw-round-action { transition:none; } }